效果：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. 剑指Offer面试题：5.重建二叉树

    一.题目:重建二叉树 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序 ...

  2. ASP.Net请求处理机制初步探索之旅 - Part 3 管道

    开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...

  3. MySQL 清空慢查询文件

    标签:配置慢查询 概述 本章主要写当慢查询文件很大的时候怎样在线生成一个新的慢查询文件. 测试环境:mysql 5.6.21 步骤 配置慢查询 默认的my.cnf文件在/etc/目录下 vim /et ...

  4. JavaScript css-dom

    HTML负责结构层,网页的结构层由HTML或者XHTML之类的标记语言负责构建 CSS负责表示层,描述页面内容应该如何呈现. JavaScript负责行为层,负责内容应该如何响应事件这一问题. 能利用 ...

  5. java.lang.IndexOutOfBoundsException at java.io.FileOutputStream.writeBytes(Native Method)

    ss available : /usr/linkapp/data/linkapp/ddn_1440639847758_temp java.lang.IndexOutOfBoundsException ...

  6. iOS-数据持久化详细介绍

    1.iOS-数据解析XML解析的多种平台介绍 2.iOS-数据持久化基础-JSON与XML数据解析 3.iOS-数据持久化基础-沙盒机制 4.   数据持久化的几种方式: 1)plist(XML属性列 ...

  7. iOS----自定义UIView，绘制一个UIView

    绘制一个UIVIew最灵活的方式就是由它自己完成绘制.实际上你不是绘制一个UIView,你只是子类化了UIView并赋予子类绘制自己的能力.当一个UIVIew需要执行绘图操作的时,drawRect:方 ...

  8. WPF入门教程系列二十——ListView示例(二)

    第四步.WPF后台逻辑代码编写 在后台用Entity Framework 6.1的Code First方式获取数据库中的数据.同时,在“刷新”按钮的方法中进行数据绑定.操作步骤如下: 1)  在“刷新 ...

  9. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

  10. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...