效果：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. 【腾讯Bugly干货分享】Android ImageView 正确使用姿势

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5832602d7196970d65901d76 导语 本文主要介绍了ImageV ...

  2. 自己动手写一个简单的MVC框架（第二版）

    一.ASP.NET MVC核心机制回顾 在ASP.NET MVC中,最核心的当属“路由系统”,而路由系统的核心则源于一个强大的System.Web.Routing.dll组件. 在这个System.W ...

  3. MySQL 存储过程

    MySQL 存储过程 存储过程是通过给定的语法格式编写自定义的数据库API,类似于给数据库编写可执行函数. 简介 存储过程是一组为了完成特定功能的SQL语句集合,是经过编译后存储在数据库中. 存储过程 ...

  4. 同一AppDomain内的SharpGL的FrameBuffer会相互影响？

    同一AppDomain内的SharpGL的FrameBuffer会相互影响? 今天做一个试验时,偶然发现了这样一个问题. 以SharpGL的示例项目SimpleDrawingSample为例. 给Fo ...

  5. 谁占了我的端口 for Windows

    这篇文章发布于我的 github 博客:原文 今天在本地调试 Blog 的时候意外的出现了一些错误:127.0.0.1 4000 端口已经被其他的进程占用了.如何找到占用端口的进程呢? Configu ...

  6. 阿里云centos7搭建wordpress环境

    阿里云搭建wordpress系统 一.购买阿里云 二.安装php开发环境 1． https://www.apachefriends.org/zh_cn/index.html网站下载linux下的xam ...

  7. jQuery源码分析系列(35) : Ajax - jsonp的实现与原理

    ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本 json核心就是:允许用户传递一个callba ...

  8. java面试知识（来自牛客网）

    接口和抽象类的区别是什么? 接口和抽象类的区别是什么? Java提供和支持创建抽象类和接口.它们的实现有共同点,不同点在于:接口中所有的方法隐含的都是抽象的.而抽象类则可以同时包含抽象和非抽象的方法. ...

  9. Android音视频之MediaPlayer音视频播放

    前言: 昨天总结了视频录制,今天来学习一下视频的播放,Android的视频播放主要采用MediaPlayer类. MediaPlayer介绍 MediaPlayer类可用于控制音频/视频文件或流的播放 ...

  10. 我的Objective-C系列文章

    做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...