在项目开发过程中,二级导航菜单效果出现的频率是非常高的,但是一般情况下,很多人第一印象就是使用js,其实CSS也可以实现的,(PS :一般能使用CSS解决的不要使用js,能用原生js的尽量不用jq(个人观点)。)
效果如下:
代码如下:
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
#subMenu *{margin:0;padding:0;}
#subMenu li{list-style-type:none;float:left;width:200px;height:40px;line-height:40px;text-align:center;background:#ccc;}
#subMenu li a{display:block;}
#subMenu li a:hover{background:#eee;color:red;}
#subMenu .dd ul{display:none;}
#subMenu .dd:hover ul{display:block;}
</style>
</head>
<body>
<ul id="subMenu">
<li class="dd">
<a href="#">导航1</a>
<ul>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
</ul>
</li>
<li class="dd">
<a href="#">导航2</a>
<ul>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
</ul>
</li>
<li class="dd">
<a href="#">导航3</a>
<ul>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
</ul>
</li>
<li class="dd">
<a href="#">导航4</a>
<ul>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
<li><a href="#">李四导航</a></li>
</ul>
</li>
</ul>
</body>
</html>
下雨天,天气终于没那么热了,租不起空调房的孩子晚上睡觉的时候都舒服了好多…