HTML代码:

 <div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">
小米手机
<div class="xs">
<div class="xiao"></div>
<img src="img/1.jpg" />
</div>
</a>
</li>
<li>
<a href="#">
红米
<div class="xs">
<div class="xiao"></div>
<img src="img/2.jpg" />
</div>
</a>
</li>
<li><a href="#">小米平板</a></li>
<li><a href="#">小米电视</a></li>
<li>
<a href="#">
盒子
<div class="xs">
<div class="xiao"></div>
<img src="img/3.jpg" />
</div>
</a>
</li>
<li>
<a href="#">
路由器
<div class="xs">
<div class="xiao"></div>
<img src="img/4.jpg" />
</div>
</a>
</li>
<li><a href="#">合约机</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>

css3样式:

 * {
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:;
} .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;
}

转载:http://www.w2bc.com/article/jquery-xiaomi-nav

小米官网的css3导航菜单的更多相关文章

  1. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  2. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  3. demo 基于html css 实现小米官网部分内容搭建

    文件夹目录 mi-site-----------主文件夹 css------------css文件文件夹 fonts.css---矢量图标css index.css---主页面样式css reset. ...

  4. 用jQuery制作仿网易云课堂导航菜单效果

    最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...

  5. CSS练习:仿小米官网

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  6. 云南农业职业技术学院 / 互联网技术学院官网 HTML5+CSS3

    HTML学完后写了,有小组成员参与开发,我只写了主页,那就只贴主页的代码出来了. 作为初学者,代码写得不太好,写博客纯属记录!有问题望指导! 码云开源仓库地址:https://gitee.com/yn ...

  7. 小米网css3导航下拉菜单代码

    效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...

  8. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...

  9. MongoDB 红宝书-MongoDB官网使用指南

    本文转载自Mongodb中文社区:http://www.mongoing.com/archives/27359 无论你是MongoDB的使用者.爱好者.初学者还是路人甲,有一个学习与进修的资源宝藏是千 ...

随机推荐

  1. SQLite笔记

    一.SQLite下载: http://www.sqlite.org/download.html (或在NuGet下载安装) 二.SQLite操作: 1.添加引用System.Data.SQLite,如 ...

  2. Vasya and Basketball CodeForces - 493C

    Vasya follows a basketball game and marks the distances from which each team makes a throw. He knows ...

  3. [QNAP crontab 定時執行程式

    注意要自動執行的 sh 檔不要放在 /root 裡, 不然韌體更新後檔案會不見, 要放在個人帳號的資料夾,例如 /share/homes/帳號/ QNAP 的 crontab 放在 /etc/conf ...

  4. 【CJOJ1167】【洛谷1894】[USACO4.2]完美的牛栏

    题面 Description 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来 ...

  5. PHP接收android传过来的图片

    在android手机app上,上传图片,PHP服务端接收图片需要一下步骤 1 需要android 开发人员 把图片转成base64格式 2 PHP端接收转化后的base64字符串,然后进行转译 fun ...

  6. .net framework 4.5 +steeltoe+ springcloud 实现服务注册功能

    首先得先了解并熟悉一下springcloud,并手动去搭建一个服务中心,具体可度娘教程. 如果是.net core的话,实现注册也是没有问题的,网上教程很多,可自行度娘. 最难的就是基于Framewo ...

  7. The program 'yum' is currently not installed. You can install it by typing:

    执行:(可以直接写成sudo su,就直接转成root了) sudo apt-get updateapt-get install lrzsz 出现:The program 'yum' is curre ...

  8. PAT乙级-1037. 在霍格沃茨找零钱(20)

    如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 -- 就如海格告诉哈利的:"十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易.& ...

  9. ### Error querying database. Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception is java.sql.SQLException: An attempt by a client to chec

    数据库连接超时,是数据库连接时的相关配置写错,例如:数据库密码,驱动等问题

  10. 【OpenCV-Python:实现人脸、人眼、嘴巴识别】实战(一)

    AI时代的到来,手机上的APP开始应用人脸识别去完成事情,如iphoneX的人脸解锁,百度自动贩卖机的人脸识别系统进行支付,支付宝的人脸识别登录等,提高了使用软件的易用性,但也因为其便利性,在某些市面 ...