Разделители в меню

Довольно часто приходится верстать просты меню с разделителем - вертикальной чертой. Рашил поделиться рецептом - надеюсь кому-то будет полезен.

HTML


<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Каталог</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Вариант первый:

CSS


.menu {
overflow: hidden;
width: 100%;
/* включим hasLayout для IE
или height: 1%; - Holly Hack */
list-style: none;
}
.menu li {
float: left;
border-left: 1px solid #000;
margin-left: -1px;
}

Вариант второй:


.menu li {
    border-left: 1px solid #000;
    display: inline;
}
.menu li:first-child {
    border: 0;
}
*html .menu li {
    border-left-width: expression(this.previousSibling==null?'0':'1px');
}

Остальные стили опущены.

У студии Артемия Лебедева на этот счёт есть свой вариант решения с background’ом и margin’ами

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>