横向菜单
原始代码：
<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>
