伪类和兄弟选择器实现纯CSS二级导航栏菜单功能
2017-02-24 21:51:22
css
今天闲着无聊做了一个纯CSS的二级导航栏，没有使用js的好处就是网页加载速度更快，其实原来很简单，就是使用到了伪类选择器hover和兄弟元素选择，最初的时候二级导航栏是display:none隐藏状态，当鼠标移到(:hover)一级导航栏li的时候，当前li的兄弟(使用符号+ )元素ul就变成了display:block状态，这样就达到了显示的状态，样子比较丑，如果有兴趣的朋友可以自己美化一下CSS，效果如下:
css代码如下：
<style type="text/css">
*, body {
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
}
.clear {
clear: both;
}
.nt-menu ul {
background-color: #5C5C5C;
}
.nt-menu-list {
width: 1200px;
margin: 0 auto;
}
.nt-menu-list > li {
display: inline-block;
position: relative;
}
.nt-menu-list > li a {
color: #ffffff;
text-decoration: none;
display: inline-block;
}
.nt-menu-list > li > a {
padding: 10px 15px;
}
.nt-menu-list > li a:hover {
}
.nt-menu-list > li:hover > a + ul {
display: block;
}
.nt-menu-list > li ul {
display: none;
left: 0;
position: absolute;
top: 41px;
z-index: 10;
}
.nt-menu-sibiling a {
display: block;
font-size: 14px;
padding: 5px;
text-align: center;
width: 94px;
}
</style>
|
HTML代码如下：
<div class="nt-menu"> <ul class="nt-menu-list"> <li> <a title="首页" href="http://www.notetribe.com">首页</a> </li> <li> <a title="电脑" href="/">电脑</a> <ul class="nt-menu-sibiling"> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> </ul> </li> <li> <a title="手机" href="/">手机</a> <ul class="nt-menu-sibiling"> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> </ul> </li> <li> <a title="男装" href="/">男装</a> <ul class="nt-menu-sibiling"> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> </ul> </li> <li> <a title="女装" href="/">女装</a> <ul class="nt-menu-sibiling"> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> </ul> </li> <li> <a title="鞋子" href="/">鞋子</a> <ul class="nt-menu-sibiling"> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> <li> <a title="笔记本电脑" href="/">笔记本电脑</a> </li> </ul> </li> </ul> </div> |
如果对你有帮助，请伸出你漂亮的小手，点击浏览器收藏或者按ctrl+d收藏笔记部落吧，
官方部落群：340525720 点击链接加入群【笔记部落】：笔记部落
