CSS3 二级导航菜单的制作的示例
Posted 挨踢小子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 二级导航菜单的制作的示例相关的知识，希望对你有一定的参考价值。
让我们抱团成长
文字隐藏怎么办，滑动屏幕试试看！
图文均来自网络，版权归作者所有，如有侵权，请私信删除
—start—
如果想要实现网页的二级导航，我们可以使用JS技术，动态的显示和隐藏二级菜单，当然也可以使用CSS技术来实现。并且这里推荐使用CSS，因为其效率更高，更流畅。这里将介绍二级菜单的动态显示与隐藏。
1 结构
一般导航的主体我们主要是使用ul li标签
<body>
<header>
<!-- 一级导航开始 -->
<nav>
<ul class="menu">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品</a>
<!-- 二级导航开始 -->
<ul class="submenu">
<li><a href="#">小程序</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">企业站</a></li>
</ul>
<!-- 二级导航结束 -->
</li>
<li>
<a href="#">服务</a>
<!-- 二级导航开始 -->
<ul class="submenu">
<li><a href="#">技术支持</a></li>
<li><a href="#">产品外包</a></li>
</ul>
<!-- 二级导航结束 -->
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</nav>
<!-- 一级导航结束 -->
</header>
</body>
2 布局
导航的布局，由于子元素要随着父元素，所以对二级菜单选取定位布局。要想让多个li在一行中显示，那么就需要让li进行浮动。
body{margin: 0; font-size: 14px; color: #666}
ul,ol{margin: 0;padding: 0; list-style: none;}
a {text-decoration: none; color: #666;}
/*一级导航*/
/*背景色*/
ul.menu,ul.submenu {
background-color: #ededed;
}
/*一级导航浮动*/
ul.menu::after {
content: '';
display: block;
clear: both;
}
ul.menu > li {
float: left;
width: 120px;
line-height: 3em;
height: 3em;
text-align: center;
cursor:pointer;
}
/*二级导航项分割线*/
ul.submenu {
/*默认隐藏*/
display: none;
}
ul.submenu > li {
border-bottom: 1px solid #fff;
}
/*内容区*/
.content {
min-height: 800px;
background-color: #fff;
}
—end—
关注【挨踢小子】，让我们一起成长
适合分享 | 值得留言
以上是关于CSS3 二级导航菜单的制作的示例的主要内容，如果未能解决你的问题，请参考以下文章
在制作官方的时候，侧边栏的导航栏经常会要求出现二级菜单，而我们也会在两个二级导航之间加上一个分割线。当我们的需求如下图的时候，我们就需要对分割线进行处理，保证每一行的首尾都不出现分割线。