Clean markup horizontal menu example

HTML

<ul class="menu">
    <li><a href="#">Главная</a>
        <ul>
            <li><a href="#">Вторая</a></li>
            <li><a href="#">Третья</a></li>
        </ul>
    </li>
    <li><a href="#">Продукция</a></li>
    <li><a href="#">Статьи</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

CSS

.menu {/* don't forget to clear the menu! (.clearfix or clearing div) */
    margin: 20px 10px;
    font-family: Arial, sans-serif;
}

    .menu li {
        list-style-type: none; /* hide list markers */
        float: left; /* this makes the menu horizontal */
        height:46px!important;        
    }
        .menu li ul {
            display:none;          
        }
        .menu li:hover ul {
            display:block;          
        } 
            .menu li ul li {
                display:block;   
                float:none;            
            }                    
    
        .menu li a {
            font-size: 14px;
            text-decoration: none;
            display: block; /* make anchor a block element so it expands beyond its text */
            padding: 15px 30px; /* padding inside <a> - to make a wider area clickable,  not just text */
            background: #eee;
            margin: 0;
            text-transform: uppercase;  /* the ONLY right way of uppercasing text! */
            color: #00bfbf;
            border-left: solid 1px #FF7400;
        }    
        .menu li:first-child a { /* won't work in IE6 */
            border-left: none; /* hide border for first item */
        }
        .menu li a:hover {
            background: #FF7400;
            color: #fff;
        }