前端-模拟小米官网初级二级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div class="list">
<ul class="ul-list">
<li class="list1"><a href="">小米手机
<ul class="menu" id="m-1">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/mi9-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米9</h7></p>
<p id="mi9-3"><h7>2999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/mi9se-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米9SE</h7></p>
<p id="mi9-3"><h7>1999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/mix3-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米MIX3</h7></p>
<p id="mi9-3"><h7>3299元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/qingchun-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米8 青春版</h7></p>
<p id="mi9-3"><h7>1499元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/pc-320-220-mi8.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米8</h7></p>
<p id="mi9-3"><h7>2599元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/pc-320-miplay-1.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米play</h7></p>
<p id="mi9-3"><h7>1099元起</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list2"><a href="">红米
<ul class="menu" id="m-2">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/note7320-220.png" height="100px" width="150px">
<p id="mi9-2"><h7>红米note7</h7></p>
<p id="mi9-3"><h7>999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/666320.png" height="100px" width="150px">
<p id="mi9-2"><h7>红米note6</h7></p>
<p id="mi9-3"><h7>729元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/6A320.png" height="100px" width="150px">
<p id="mi9-2"><h7>红米note6A</h7></p>
<p id="mi9-3"><h7>549元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/note5-320-220.png" height="100px" width="150px">
<p id="mi9-2"><h7>红米note5</h7></p>
<p id="mi9-3"><h7>1049元起</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list3"><a href="">电视
<ul class="menu" id="m-3">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/4s75.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视4S 75寸</h7></p>
<p id="mi9-3"><h7>7999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/32.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视4S 32寸</h7></p>
<p id="mi9-3"><h7>799元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/4a43.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视4A 43寸青春版</h7></p>
<p id="mi9-3"><h7>1499元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/50.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视4A 50英寸</h7></p>
<p id="mi9-3"><h7>1999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/4A-55.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视4A 55英寸</h7></p>
<p id="mi9-3"><h7>2999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/475toutu.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米电视</h7></p>
<p id="mi9-3"><h7>查看全部</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list4"><a href="">笔记本
<ul class="menu" id="m-4">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/bijiben32012.5.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米笔记本 Air 12.5</h7></p>
<p id="mi9-3"><h7>3299元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/daohang13.3.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米笔记本 Air 13.3</h7></p>
<p id="mi9-3"><h7>4999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/WechatIMG603.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米笔记本 15.6</h7></p>
<p id="mi9-3"><h7>4199元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/WechatIMG603.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米笔记本 Pro 15.6</h7></p>
<p id="mi9-3"><h7>5199元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/xinbijiben.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米游戏本</h7></p>
<p id="mi9-3"><h7>6699元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/pingbanok.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米平板</h7></p>
<p id="mi9-3"><h7>1099元起</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list5"><a href="">家电
<ul class="menu" id="m-5">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/320_220.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家互联网洗烘一体机10kg</h7></p>
<p id="mi9-3"><h7>2499元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/yijinengxiao320.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家互联网空调（一级能效）</h7></p>
<p id="mi9-3"><h7>2699元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/yijinegxiaokongtiaoxin.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家互联网空调</h7></p>
<p id="mi9-3"><h7>2299元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/xiaomijingshuiqi.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米净水器</h7></p>
<p id="mi9-3"><h7>1999元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/saodijiqiren320-220.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家扫地机器人</h7></p>
<p id="mi9-3"><h7>1699元</h7></p>
</b>
</li>
<!--<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"> </p>
<img src="img/xinfeng.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>新风机</h7></p>
<p id="mi9-3"><h7>2699元起</h7></p>
</b>
</li>-->
</ul>
</a></li>
<li class="list6"><a href="">新品
<ul class="menu" id="m-6">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/mi9-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米9</h7></p>
<p id="mi9-3"><h7>2999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/mi9se-320.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米9SE</h7></p>
<p id="mi9-3"><h7>1999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/note7320-220.png" height="100px" width="150px">
<p id="mi9-2"><h7>红米note7</h7></p>
<p id="mi9-3"><h7>999元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/chongdianbao-320.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米无线充电宝 10000mAh</h7></p>
<p id="mi9-3"><h7>149元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/wuxianchechong-320.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米无线车充</h7></p>
<p id="mi9-3"><h7>169元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/lifaqi-320.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米兔婴儿理发器</h7></p>
<p id="mi9-3"><h7>119元</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list7"><a href="">路由器
<ul class="menu" id="m-7">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/mesh.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米路由器 Mesh</h7></p>
<p id="mi9-3"><h7>9999元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/xiaomiluyouqi4.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米路由器 4</h7></p>
<p id="mi9-3"><h7>199元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/luyouqi41C.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米路由器 4C</h7></p>
<p id="mi9-3"><h7>99元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/3A.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米路由器 3A</h7></p>
<p id="mi9-3"><h7>139元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/PRO.png" height="100px" width="150px">
<p id="mi9-2"><h7>小米路由器 HD/Pro</h7></p>
<p id="mi9-3"><h7>499元起</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/quanbuluyouqi.png" height="100px" width="150px">
<p id="mi9-2"><h7>查看全部小米路由器</h7></p>
</b>
</li>
</ul>
</a></li>
<li class="list8"><a href="">智能硬件
<ul class="menu" id="m-8">
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/yuntai.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米米家智能摄像机云台版</h7></p>
<p id="mi9-3"><h7>199元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/xishouj.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家自动洗手机套装</h7></p>
<p id="mi9-3"><h7>79元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/airdots.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米蓝牙耳机AirDots青春版</h7></p>
<p id="mi9-3"><h7>199元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/xiaoaimini.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>小米小爱音箱mini</h7></p>
<p id="mi9-3"><h7>169元</h7></p>
</b>
</li>
<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/tixudao.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>米家电动剃须刀</h7></p>
<p id="mi9-3"><h7>199元</h7></p>
</b>
</li>
<!--<li>
<b class="mi9" href="https://www.mi.com/">
<p id="mi9-1"></p>
<img src="img/shouhuanNFC.jpg" height="100px" width="150px">
<p id="mi9-2"><h7>查看全部</h7></p>
<p id="mi9-3"><h7>智能硬件</h7></p>
</b>
</li>-->
</ul>
</a></li>
<li class="list9"><a href="">服务
<!--<ul class="menu" id="m-9">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>-->
</a></li>
<li class="list10"><a href="">社区
<!--<ul class="menu" id="m-10">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>-->
</a></li>
</ul>
</div>
</body>
</html>
css界面
.ul-list{
list-style: none;
border:1px solid darkorange;
width: 1000px;
height: 80px;
padding-left: 200px;
}
li{
list-style: none;
float:left;
margin-left:30px;
}
a{
text-decoration: none;
color: black;
display:block;
text-align: center;
line-height: 80px;
/*法二：block是把行内元素以块级元素的形式展示出来*/
}
a:hover{
color: orange;
}
.menu{
border:1px solid #FFA500;
height: 200px;
width: 1160px;
position: absolute;
/*必须绝对定位*/
display:none;
/*二级菜单隐藏*/
}
#m-1{
margin-left:-231px;
}
#m-2{
margin-left:-325px;
}
#m-3{
margin-left:-387px;
}
#m-4{
margin-left:-449px;
}
#m-5{
margin-left:-527px;
}
#m-6{
margin-left:-589px;
}
#m-7{
margin-left:-651px;
}
#m-8{
margin-left:-729px;
}
#m-9{
margin-left:-823px;
}
#m-10{
margin-left:-885px;
}
ul>li>ul>li{
float:left;
}
ul>li:hover ul{
display:block;
/*当鼠标悬在一级菜单上时，二级菜单显示*/
}
/*hover表示一种状态，可以用在很多标签后面*/
b{
color: orange;
display:block;
line-height: 10px;
text-align: center;
/*法二：block是把行内元素以块级元素的形式展示出来*/
}
b:link{
color:gray;
}/*未被访问*/
b:hover{
color:orange;
}/*停留*/
b:active{
color:gray;
}/*点击链接*/
#mi9-2{
color:gray;
}