有时候会觉得css 变得毫无章法地使用。在下拉菜单中,还有一种浮动的二级菜单。
展示一些商品。好像小米商城那个导航下拉菜单。如下图
下面模拟一下,做的过程也遇到一些小问题。例如不用position去定位的时候,触发二级的菜单的时候,总是有异常导致不能使用。对二级菜单展示到时候,加上position上去则神奇问题解决了
只是模拟了两个菜单选项。其他基本上一致,不过是这个菜单有很多细节的地方还是缺失。如阴影部分,如间距线的有一些要和一些不要。这个还是看这个是不是同列的产品了。所以要归类还得要思考如何去处理好。
原本想练习flex布局的,发现flex用起来还不熟悉。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米下拉菜单2</title>
</head>
<style type="text/css">
ul,li,p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.menu {
width:-webkit-fit-content;
width:-moz-fit-content;
margin: 0 auto;
}
.menu>ul>li {
float: left;
margin-right: 20px;
font-size: 13px;
padding: 20px 0;
}
.menu>ul>li:hover {
color: orangered;
}
.sub_menu {
position: absolute;
margin-top: 20px;
left: 0px;
width: 100%;
height: 208px;
background-color: white;
display: none;
border-top: 1px solid #E0E0E0;
box-shadow: 2px 1px 1px #E0E0E0;
}
.sub_menu .menu_item {
border-right: 1px solid #E0E0E0;
height: 208px;
display: inline-block;
cursor: pointer;
}
.sub_menu .menu_item img {
margin-top: 40px;
}
.menu_item p {
text-align: center;
margin-top: 5px;
color: #333333;
}
.menu_item .price {
color: #ff6700;
font-size: 14px;
}
</style>
<body>
<div class="main">
<div class="menu">
<ul>
<li>小米手机
<div class="sub_menu">
<ul>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/15/goods/nav/maxdingbu!160x110.jpg" />
<p>小米max</p>
<p class="price">1499起</p>
</li>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/16/goods/nav/mi5!160x110.jpg" />
<p>小米手机5</p>
<p class="price">1799起</p>
</li>
</ul>
</div>
</li>
<li>红米
<div class="sub_menu">
<ul>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/g/2015/cn-index/hongmipro-320!160x110.jpg" />
<p>红米pro</p>
<p class="price">1499起</p>
</li>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/15/goods/nav/note3!160x110.jpg" />
<p>红米note3</p>
<p class="price">899起</p>
</li>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/g/2015/video/hongmi3s!160x110.jpg" />
<p>红米手机3S</p>
<p class="price">699起</p>
</li>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/15/goods/nav/hongmi3!160x110.jpg" />
<p>红米手机3</p>
<p class="price">699起</p>
</li>
<li class="menu_item">
<img src="http://c1.mifile.cn/f/i/g/doodle/320-220!160x110.jpg" />
<p>红米手机3x</p>
<p class="price">799起</p>
</li>
</ul>
</div>
</li>
<li>平板·笔记本</li>
<li>电视</li>
<li>盒子·影音</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".menu >ul >li").hover(function() {
$(this).children().show();
}, function() {
$(this).children().hide();
});
});
</script>
</body>
</html>