当前位置：首页 > news >正文

最新CSS3横向菜单的实现

news 2025/7/22 19:10:00

横向菜单

原始代码：

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

查看全文

http://www.lryc.cn/news/415690.html