效果：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. Python黑帽编程2.5 函数

    Python黑帽编程2.5 函数 写了几节的基础知识,真心感觉有点力不从心.这块的内容说实话,看文档是最好的方式,本人的写作水平,真的是找不出更好的写法,头疼.简单带过和没写一样,写详细了和本系列教程 ...

  2. 黑科技：gif二维码

    本篇文章是缘于在微博上看到了一的有意思的东西.由于腾讯与阿里的竞争关系,如果你是一个大V,在微博上发布微信的二维码会被屏蔽掉.于是有人发现了这样一个现象:人眼有视觉暂留效应,手机的摄像头由于捕捉影像的 ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (37) ------ 第六章 继承与建模高级应用之独立关联与外键关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 6-13  在基类中应用条件 问题 你想从一个已存在的模型中的实体派生一个新的实体, ...

  4. 神奇的CSS sprites，制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  5. 编译opengl编程指南第八版示例代码通过

    最近在编译opengl编程指南第八版的示例代码,如下 #include <iostream> #include "vgl.h" #include "LoadS ...

  6. 针对格式文件，Python读取一定大小的文件内容

    由数据库导出的数据是格式化数据,如下所示,每两个<REC>之间的数据是一个记录的所有字段数据,如<TITLE>.<ABSTRACT>.<SUBJECT_COD ...

  7. EasyUI DataGrid formatter 格式化增加链接

            function fLoadTable() {             $('#tt').datagrid({                 title: '',           ...

  8. iOS开发之画图板(贝塞尔曲线)

    贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...

  9. ELF静态链接

    一直对ELF目标文件是怎样链接成可执行文件感到比较的疑惑,ELF文件里面的重定位段是怎样解决符号引用问题的?前几天偶然看了<深入理解计算机系统>里面讲了这个问题,看了之后对里面的实现机制终 ...

  10. JS只能输入数字，数字和字母等的正则表达式

    1.只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> ...