无序列表制作横向导航

关于导航栏，就是导航横向排列中间用竖线分割的那种，我所见的做法有4种了。最简单的也是以前最常用的是栏目1 | 栏目2 | 栏目3 这种。

自从div+css爆发开始，很多导航都采用无序列表<ul>这种方式了。据说这种方式有N多好处，具体如何不得而知。用<ul>做导航栏最大的问题就在于中间的一条竖线。这条竖线的加入方法我见过三种。

 

1. 利用空的<li></li>,给这个li一个class，在class中定义背景宽度为1px，高度为100%或者自己定义高度n px，定义一个背景色(也似乎是背景图，偶忘记了，这个不重要)。 
2. 利用li中的border,设border-left为1px或者border-right为1px，这样出现的问题就是栏目最左或者最右会多出一个border边框，很难看。一般可以用margin-left(or right):-1px;可以把那个部分隐藏。不过ff里不可以。
3. 自己用的终极大招：也许很多人这么用过了。。。。也不算什么终极大招。不过有一个!important属性，很好用哦。
   < style > ...
   li{...}{list-style:none; border-left:1px solid red; font:12px “宋体”;float:left;}
   #special{...}{border:none !important}
   </ style >
   < body >
   < ul >
   < li  id ="special" > 栏目 </ li >
   < li > 栏目 </ li >
   < li > 栏目 </ li >
   < li > 栏目 </ li >
   </ ul >
   </ body >

 其实就是在那个第一个li后面加一个id啦，id的style是border:none，然后加上!important，提高样式的优先级，就ok了。