TEXHOSTROY MENU

by alexpop

HTML

<div class="menuWrap">
<ul class="menu">
    <li><a href="">Крепеж</a></li>
    <li><a href="">Инструмент</a>
        <ul class="level2">
            <li><a href="">Анкерная техника</a>
                <ul class="level3">
                    <li><a href="">ГРИБЫ (Дюбель для крепления теплоизоляции)</a></li>
                    <li><a href="">Дюбель с шурупом под молоток БЫСТРЫЙ МОНТАЖ</a></li>
                    <li><a href="">Дюбель-гвоздь и Патроны,  ПИСТОЛЕТ монтажный</a></li>
                    <li><a href="">Дюбель "Дрива"</a></li>
                    <li><a href="">Дюбель "Бабочка"</a></li>
                    <li><a href="">ГРИБЫ (Дюбель для крепления теплоизоляции)</a></li>
                    <li><a href="">Дюбель с шурупом под молоток БЫСТРЫЙ МОНТАЖ</a></li>
                    <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>
                <ul class="level3">
                    <li><a href="">ГРИБЫ (Дюбель для крепления теплоизоляции)</a></li>
                    <li><a href="">Дюбель с шурупом под молоток БЫСТРЫЙ МОНТАЖ</a></li>
                    <li><a href="">Дюбель-гвоздь и Патроны,  ПИСТОЛЕТ монтажный</a></li>
                    <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>
            <li><a href="">Дюбельная техника</a></li>
        </ul>
    </li>
    <li><a href="">Электротовары</a></li>
    <li><a href="">Электроинструмент</a>
        <ul class="level2">
   ...

CSS

body {
    font: 14px/1.5em 'Open Sans', arial ;
}

.clearfix:before, .clearfix:after {content: ""; line-height: 0; display: table;}
.clearfix:after {clear: both;}

.menuWrap {
    background: #eee;
}
.menu li a,
.level3 {
    -webkit-transition:	all .3s ease;
    -moz-transition:	all .3s ease;
    -o-transition:		all .3s ease;
    -ms-transition:		all .3s ease;
    transition:			all .3s ease;
}
ul {
     list-style:none;
    margin: 0;
    padding: 0;
}
.menu {
    background: #f5f5f5;
    overflow: hidden;
}
.menu > li {
    background: #222;
    float: left;
    color: #fff;
    width: 20%;
}
.menu a {
    display: block;
    color: red;
    padding: .5em 0;
    text-decoration: none;
}
.menu a:hover {
    text-decoration: underline;
}
.menu > li > a {
    color: #fff;
    border-right: 1px solid #fff;
    text-align: center;
}
.menu .level2 {
    display: none;
    position: absolute;
    left: 8px;
    right: 8px;
}
.menu .level2 a {
    padding-left: 20px;
}
.menu > li:hover .level2 {
    display: block;
}
.menu .level3 {
    display: none;
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
}
.menu .level2 > li:hover {
    background: #eee;
}
.menu .level2 > li:hover > .level3 {
    display: block;
    background: #eee;
}