Clean markup horizontal menu example II: with submenus

by dipish

HTML

<ul class="menu">
    <li><a href="#">Главная</a></li>
    <li>
        <a href="#">Продукция</a>
        <ul>
            <li><a href="#">Веники</a></li>
            <li><a href="#">Швабры</a></li>
            <li><a href="#">Пылесосы</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Статьи</a>
        <ul>
            <li><a href="#">Здоровый образ жизни</a></li>
            <li><a href="#">Приборостроение</a></li>
            <li><a href="#">Умный дом</a></li>
        </ul>
    </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 { /* explicitly specify depth with child selectors instead of descendant selectors */
        list-style-type: none; /* hide list markers */
        float: left; /* this makes the menu horizontal */
        position: relative; /* !NB create positioning context for submenu */
    }
    
        .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;
            white-space: nowrap; /* disable text wrapping in items */
        }    
        .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;
        }

        /* SUBMENU */        
        .menu > li > ul {
            position: absolute;  /* absolute inside relative */
            min-width: 100%; /* submenu can be wider, but *at least* as wide as parent item */
            background: #FF7400;  
            display: none;   /* hidden by default */
            border-right: solid 1px #FF7400; /* to match parent item width with border */
        }

        .menu > li:hover > ul { /* main menu item hovered - display submenu */
            display: block;
        }

            .menu > li > ul > li > a { /* styles for submenu items */
                display: block; padding: 10px 20px;
                color: #fff;
                text-decoration: none;
                font-size:...