最新CSS3横向菜单的实现

阿立聊代码

于 2024-08-05 22:52:29 发布

阅读量403

点赞数 8

分类专栏：网页设计文章标签： css3 前端 javascript 横向菜单

本文链接：https://blog.csdn.net/qq_36324341/article/details/140939016

版权

网页设计专栏收录该内容

27 篇文章 0 订阅

订阅专栏

横向菜单

原始代码：

<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为除第一个链接之外每个链接左侧加一条竖线作为分隔线

案例代码：

<!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>