css3 横向二级导航

CSS3可以为网页设计师提供更多的展示空间，特别是在导航菜单的样式设计上，更是有了突飞猛进的发展。本文介绍如何使用CSS3实现横向二级导航菜单。

nav {
    background: #333;
    display: flex;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    position: relative;
    display: inline-block;
}
nav ul li a {
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}
nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
nav ul li:hover ul {
    display: block;
}
nav ul li ul li {
    display: block;
}
nav ul li ul li a {
    background: #333;
    white-space: nowrap;
    border-bottom: 1px solid #555;
}
nav ul li ul li a:hover {
    background: #555;
}
    

上述代码实现了一个简单的横向二级导航菜单。其中，nav元素设置了背景色和使用了flex布局。ul和li元素的内边距和外边距被清空了，采用了悬挂缩进。a元素具有白色的字体和20像素的内边距，而ul和li元素上下文被padding为0。

导航菜单的二级子菜单通过position属性实现绝对定位，在被鼠标悬停时通过display属性改变其值。同时，由于定位使得子菜单的宽度默认占满了整个父元素的宽度，需使用white-space样式来防止断行。

横向二级导航使得用户能够更方便地浏览网站的信息，也为网页设计师提供了更多展示信息的可能性。通过使用CSS3，实现横向二级导航菜单也变得非常简单。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！