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