垂直导航条：
水平导航条：
网站往往是有一定的结构，因此导航的设计直观重要，功能性与视觉性兼备的导航可以提高用户体验。这时候CSS就可以大展神功。
使用无序列表加超链接元素的方式作导航条，此乃比较常用的方式之一也。而剩下的就是通过CSS的方式来实现此无序列表元素的各种表现形式。
<ul> <li><a href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#mails">邮箱</a></li> <li><a href="#games">游戏</a></li> </ul>
首先试着来移除列表的标记样式以及内外边距，如下所示：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
上例解析：
list-style-type: none;就是移除了无序列表默认的标记样式（如此标记物就没啦）margin:0就把外边距变成0了padding:0就把内边距变成0了之后不管是实现水平导航条还是实现垂直导航条，都会使用到上述CSS设置。
为了实现垂直导航条（纵向导航栏），可以把<a>放在列表项li内，而且来修改个列表项的背景色：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #eef8f8;
}
上例解析：
display: block使该li元素变成一个块级元素，如此，整个li元素会变得都可以点击了（刚才是只可以点击超链接的文字部分）；不仅如此，而且因为是块级元素（Block），所以可以自由设置高度、宽度、内边距、外边距了；width: 60px;定义列表项li的宽度；background-color: #eef8f8即自定义设置了列表项li的背景色。其实，汝也可以不设置a元素的宽度而去设置无序列表的宽度，因为a元素被定义成了block块级元素，而块级元素的默认特性就是会占据整行宽度。故而这种方式也是等效的。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
background-color: #eef8f8;
}
设置鼠标悬浮在列表项上时的CSS样式。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #eef8f8;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* 鼠标悬浮时的样式 */
li a:hover {
background-color: #555;
color: white;
}
为当前所在页面对应的导航列表项设激活状态的样式。（记得要放在鼠标悬浮时的样式设置的后面；或者选择悬浮状态元素时排除active类也行，即选择器li a:hover:not(.active)。下例中使用前者。）
.active {
background-color: #46acb6;
color: white;
}
设置边框与超链接文字居中对齐。
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
把垂直导航条固定到侧栏来试试。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling */
}
实现水平导航条有两种思路，即inline和float两种思路。
inline思路
将列表项元素的display属性设置成inline，如此，列表项就不会换行了，从而实现水平导航条，如下所示：
li {
display: inline;
}
float思路
将列表项元素设置成浮动元素，如此亦能实现水平导航条：
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
float的方式比inline的方式的自由度更大，如下所示，通过float的思路，定义一个相对完善的水平导航栏如下：
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 当hover的时候背景色即变成#111色彩 */
li a:hover {
background-color: #111;
}
为当前所在页面对应的导航列表项设激活状态的样式。（记得要放在鼠标悬浮时的样式设置的后面；或者选择悬浮状态元素时排除active类也行，即选择器li a:hover:not(.active)。下例中使用后者来演示。）
.active {
background-color: #46acb6;
}
让某个列表项向右浮动：将需要向右移动的列表项设置上float:right即可。
<ul> <li><a href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#mails">邮箱</a></li> <li style="float:right;"><a href="#games" class="active">游戏</a></li> </ul>
如下所示，通过设置border-right属性给导航的列表项之间添加上分隔线。
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
将水平导航条固定在页首或者固定在页脚部分。（下例演示的是固定在页首，要想固定在页脚部分，把top:0改成bottom:0即可）
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
}