Данное меню очень похоже на предыдущее, которое я публиковал в предыдущей записи.  Правда сделано оно немного по другому. Список вместо буквенной или цифровой нумерации подразумевает использование разных символов, которые называются маркерами. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тегом <LI>.

Html код:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">FAQ</a></li>
</ul>

А теперь придадим нашему горизонтальному меню внешнего вида, чтобы оно было у нас красивым. И поможет нам в этом CSS, а кто же еще!

CSS код:

*{
    margin:0;
    padding:0;
}
.page{
    margin:0 auto;
    width:995px;
}
ul{
    list-style:none;
    width:100%;
    height:40px;
    background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
    float:left;
    border-right:1px solid #333;
}
ul li a{
    display:block;
    height:40px;
    padding:0 35px;
    float:left;
    text-transform: uppercase;
    font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
    color:#fff;
    text-decoration:none;
    text-align:center;
}
ul li a:hover,
ul li.active a{
    background:url(images/bg-button.gif) top left repeat-x;
}

Все, меню готово. Если хотите, то можете ознакомиться с меню, посмотрев демо.