В этом уроке я покажу вам на сколько просто сделать простое и в тоже время красивое меню для сайта.
Для этого нам понадобиться лишь небольшие знания HTML и CSS/CSS3

Вот что у нас получится




Давайте пожалей начнем с самого простого, а именно с 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
Нам нежно сделать так, чтобы меню было горизонтальное, а так же сделать внутренний отступ от самих ссылок.
Пишем CSS

ul.menu {
            list-style:none;
            width:700px;
            margin:0 auto;    
        }
        ul.menu li {
            float:left;
            background:#efefef;
            -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
        }
        ul.menu a {
            display:block;
            padding:6px 20px;
            font-family: Arial, Helvetica, sans-serif;
            font-size:12px;
            text-decoration:none;
            color:#000;
        }
        ul.menu a:hover {
            background:#FFF;
        }

Вот собственно и все, пример доступен по ссылке
горизонтальное меню