最新CSS3横向菜单的实现

Code成立2024-08-06 9:58

横向菜单

原始代码：

html 复制代码

<nav class="list1">
    <ul>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Dresses</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Accessories</a></li>
    </ul>
</nav>

ul包围浮动的li元素，超出浮动隐藏
让li元素水平排列，去掉项目符号
让链接填满li元素，左右边框16px，去掉下划线，字体颜色#999
非首项li下面的a设置左边框，1px 实线 #aaa
悬停a高亮，字体颜色#555

要点：

浮动让li从垂直变成水平
display:block让链接从收缩变成扩张，整个li都可以点击
选择器li+li a为除第一个链接之外每个链接左侧加一条竖线作为分隔线

案例代码：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    <style>
        .list1 ul {
            overflow: hidden;
        }
        .list1 li {
            float: left;
            list-style-type: none;
        }
        .list1 a {
            display: block;
            padding: 0 16px;
            text-decoration: none;
            color: #999;
        }
        .list1 li + li a {
            border-left: 1px solid #aaa;
        }
        .list1 a:hover {
            color: #555;
        }    
    </style>
</head>
<body>
<nav class="list1">
    <ul>
        <li><a href="#">Shirts</a></li>
        <li><a href="#">Pants</a></li>
        <li><a href="#">Dresses</a></li>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Accessories</a></li>
    </ul>
</nav>
</body>
</html>