效果：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. 跨域获取json一些理解[腾讯电商数据的拉取方式]

    如何跨域获取json数据源?我们都知道要有callback,具体callback是如何工作的呢?如果服务器端不接收callback,我们是不是就没有办法处理了呢?读完本文后相信你会有一个大体的了解. ...

  2. ASP.NET MVC 5 - 视图

    在本节中,你要去修改HelloWorldController类,使用视图模板文件,在干净利索地封装的过程中:客户端浏览器生成HTML. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所 ...

  3. 蓄水池（Reservoir_sampling）抽样算法简记

    摘要 1.适用场合 2.算法简介 3.代码例子 4.Spark RangePartitioner 中的应用(待补充) 内容 1.适用场合:从包含n个项目的集合S中选取k个样本,其中n为一很大或未知的数 ...

  4. 使用sklearn做单机特征工程

    目录 1 特征工程是什么?2 数据预处理 2.1 无量纲化 2.1.1 标准化 2.1.2 区间缩放法 2.1.3 标准化与归一化的区别 2.2 对定量特征二值化 2.3 对定性特征哑编码 2.4 缺 ...

  5. Java邮件发送与接收原理

    一. 邮件开发涉及到的一些基本概念 1.1.邮件服务器和电子邮箱 要在Internet上提供电子邮件功能,必须有专门的电子邮件服务器.例如现在Internet很多提供邮件服务的厂商:sina.sohu ...

  6. java中集合类中Collection接口中的List接口的常用方法熟悉

    1:集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2:区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集 ...

  7. DPI深度包检测

    最近在读网络协议方面的论文,接触到DPI技术.博主是个小白,这里写些查到的笔记. 原文出处因为比较多,杂乱.百度文库和许多地方都有,就不贴链接了. 1. DPI 全称为"Deep Packe ...

  8. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  9. js+css实现骰子的随机转动

    网上找的例子,然后增添了新的东西,在这里展示一下...... 效果图预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  10. 计时器StopWatch示例

    计时器 StopWatch stwatch = new StopWatch(getClass().getSimpleName()); try{ stwatch.start(joinPoint.getS ...