<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="111.css"/>
</head>
<body>
<ul class="navigation">
<li><a>Let's Go</a></li>
<li><a id="home" >主页</a></li>
<li><a id="product_list">商品列表</a></li>
<li> <a class="cart" >购物车</a> </li>
</ul>
</body>
</html>
建立无序列表，出来的是垂直着的。我们现在需要的是水平导航栏。
在css里进行样式设置
li {
display:inline;
}
a:link,a:visited
{
text-decoration:none;
Vertical-align:top;
}
这样出来的就是水平的了。
下拉的导航栏
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a>
<ul>
<li><a href="/products/shoes">Shoes</a></li>
<li><a href="/products/jackets">Jackets</a></li>
</ul>
</li>
</ul>
#nav li li a {
padding: 2px;
}
products下面有shoes和jackets两个选项。