效果：http://hovertree.com/texiao/css3/19/

代码如下：

 <!doctype html>

 <!-- W3C规范 -->

 <html lang="zh">

 <!-- 声明 -->

 <head>

 <meta charset="UTF-8">

 <!-- 声明当前页面的三要素 -->

 <title>CSS3菜单仿小米官网菜单 - 何问起</title><base target="_blank" />

 <meta name="Keywords" content="关键字,何问起,菜单,CSS3">

 <meta name="Description" content="描述,hovertree.com,何问起CSS3菜单">

 <!-- 样式 -->

 <style type="text/css">

 * {

 margin: 0px;

 padding: 0px;

 }

 .nav {

 position: relative;

 width: 994px;

 height: 52px;

 background: #404144;

 margin: 0 auto;

 }

 .nav li {

 list-style: none;

 float: left;

 line-height: 50px;

 }

 .nav li a {

 display: block;

 text-decoration: none;

 color: #FFFFFF;

 padding: 0px 15px;

 font-family: "微软雅黑";

 }

 .nav li a:hover .xs {

 display: block;

 }

 .nav li a:hover {

 background: #333333;

 }

 .nav li a .xs {

 border: 1px solid #cccccc;

 border-top: none;

 display: none;

 width: 992px;

 background: #FFFFFF;

 position: absolute;

 top: 50px;

 left: 0px;

 }

 .nav li a .xs .xiao {

 position: absolute;

 top: -8px;

 border-left: 8px solid transparent;

 border-right: 8px solid transparent;

 border-bottom: 8px solid #FFFFFF;

 width: 0px;

 height: 0px;

 z-index: 999;

 }

 .nav li:nth-child(1) .xiao {

 left: 20px;

 }

 .nav li:nth-child(2) .xiao {

 left: 98px;

 }

 .nav li:nth-child(3) .xiao {

 left: 177px;

 }

 .nav li:nth-child(4) .xiao {

 left: 255px;

 }

 .nav li:nth-child(5) .xiao {

 left: 348px;

 }

 .nav li:nth-child(6) .xiao {

 left: 427px;

 }

 .nav li:nth-child(7) .xiao {

 left: 496px;

 }

 .nav li:nth-child(8) .xiao {

 left: 576px;

 }

 .nav li:nth-child(9) .xiao {

 left: 646px;

 }

 .nav li:nth-child(10) .xiao {

 left: 706px;

 }

 .hovertreeinfo {

 text-align:center;} .hovertreeinfo a{color:blue;}

 </style>

 </head>

 <body>

 <div class="nav">

 <ul>

 <li><a href="http://hovertree.com/h/bjaf/5yh8pnpj.htm">首页</a></li>

 <li>

 <a href="http://hovertree.com/">

 何问起网

 <div class="xs">

 <div class="xiao"></div>

 <img src="http://hovertree.com/texiao/css3/19/img/1.jpg" />

 </div>

 </a>

 </li>

 <li>

 <a href="http://hovertree.com/code/javascript/8lp142er.htm">

 红米

 <div class="xs">

 <div class="xiao"></div>

 <img src="http://hovertree.com/texiao/css3/19/img/2.jpg" />

 </div>

 </a>

 </li>

 <li><a href="http://hovertree.com/h/bjaf/v84hu8e9.htm">小米平板</a></li>

 <li><a href="http://hovertree.com/code/jquery/qmio0dq9.htm">小米电视</a></li>

 <li>

 <a href="http://hovertree.com/h/bjaf/c7d7k8te.htm">

 盒子

 <div class="xs">

 <div class="xiao"></div>

 <img src="http://hovertree.com/texiao/css3/19/img/3.jpg" />

 </div>

 </a>

 </li>

 <li>

 <a href="http://hovertree.com/h/bjaf/nebj8df9.htm">

 路由器

 <div class="xs">

 <div class="xiao"></div>

 <img src="http://hovertree.com/texiao/css3/19/img/4.jpg" />

 </div>

 </a>

 </li>

 <li><a href="http://hovertree.com/h/bjaf/a1wnr9gs.htm">合约机</a></li>

 <li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">服务</a></li>

 <li><a href="http://hovertree.com/h/bjaf/0i85qaml.htm">社区</a></li>

 </ul>

 </div>

 <div class="hovertreeinfo">

 <a href="http://hovertree.com/h/bjaf/xiaomimenu.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>

 </div>

 </body>

 </html>

转自：http://hovertree.com/h/bjaf/xiaomimenu.htm

推荐：http://www.cnblogs.com/roucheng/p/cssdaohang.html

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

小米网css3导航下拉菜单代码的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. zTree插件之多选下拉菜单代码

    zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...

  5. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  7. 兼容ie7的导航下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  9. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

随机推荐

  1. 使用Akka.net开发第一个分布式应用

    系列主题:基于消息的软件架构模型演变 既然这个系列的主题是"基于消息的架构模型演变",少不了说说Actor模型.Akka.net是一个基于Actor模型的分布式框架.如果你对分布式 ...

  2. Backbone源码分析（二）

    在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码 ...

  3. Why MVC is Better？（翻译）

    (本文翻译自CodeProject上的一篇关于ASP.NET MVC的文章,原文地址:http://www.codeproject.com/Articles/821275/Webforms-vs-MV ...

  4. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  5. SQL Server 索引和表体系结构（包含列索引）

    包含列索引 概述 包含列索引也是非聚集索引,索引结构跟聚集索引结构是一样,有一点不同的地方就是包含列索引的非键列只存储在叶子节点:包含列索引的列分为键列和非键列,所谓的非键列就是INCLUDE中包含的 ...

  6. [nRF51822] 13、浅谈nRF51822和NRF24LE1/NRF24LU1/NRF24L01经典2.4G模块无线通信配置与流程

    前言:  nRF51可以支持基于2.4G的互相通信.与NRF24LE1的通信.与NRF24LU1的通信.与NRF24L01的通信. 一.nRF51822基于2.4G和nRF51822通信 其中nRF5 ...

  7. EF：根据实体类生成表结构SQL

    根据实体类生成表结构SQL: PM> Enable-Migrations -ProjectName Domain -StartUpProjectName Handler -Force PM> ...

  8. 《Entity Framework 6 Recipes》中文翻译系列 (38) ------ 第七章 使用对象服务之动态创建连接字符串和从数据库读取模型

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第七章 使用对象服务 本章篇幅适中,对真实应用中的常见问题提供了切实可行的解决方案. ...

  9. VB6.0中，DTPicker日期、时间控件不允许为空时，采用文本框与日期、时间控件相互替换赋值（解决方案）

    VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 文本框txtStopTime1 时间框DTStopTime1(DTPicke ...

  10. 修改注册表 去除Windows快捷方式图标小箭头

    一些朋友不喜欢Windows系统中快捷方式图标上面的小箭头,下面介绍如何修改注册表去除快捷方式图标上的小箭头. 1.开始->运行->输入regedit,启动注册表编辑器,然后; 2.依次展 ...