[CODE lang="css" title="style.css"]@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
html{
height: 100%;
}
body{
font-family: 'Roboto', sans-serif;
font-size: 14px;
color:#474d59;
background: url('main-bg.png') repeat;
}
#menu-wrap {
width: 950px;
display: table;
margin: 100px auto;
background: #53BF6B;
}
#menu {
list-style: none;
padding: 0;
margin: 0;
font-family: inherit;
font-size: 14px;
z-index: 4;
position: relative;
display: table-row;
}
#menu li{
position:relative;
display: table-cell;
float: none;
margin: 0;
text-align: center;
border-right: 1px solid #80DF95;
}
#menu li:last-child {
border: 0 none;
}
#menu li a {
display: block;
color: #fdfdfd;
text-decoration: none;
padding: 12px 20px 12px 20px;
}
#menu li:hover {
background: #528F60;
}
#menu li ul li {
float:none;
width:250px;
display: block;
background: #000;
margin: 0;
padding: 0;
text-align: left;
border: 0 none;
}
#menu li ul li a {
color: #f7f7f7;
padding: 10px;
border-bottom: 1px solid #333;
}
#menu li ul li:hover {
background:#000;
text-decoration: underline;
color: #f7f7f7;
}
#menu li ul li ul li:hover {
background:#000;
text-decoration: underline;
}
#menu li ul li ul {
margin-left: 2px;
}
#menu li ul{
display:none;
position:absolute;
background-color:#4d2001;
list-style:none;
padding:0;
z-index: 5;
}
#menu li:hover ul{
display:block;
}
#menu li ul li ul,
#menu li:hover ul li ul{
display:none;
position:absolute;
left:250px;
top:0;
}
#menu li ul li:hover ul{
display:block;
}
#menu li:hover a {
color: #f7f7f7;
}
#menu li:hover > ul li a {
color: #f7f7f7;
}
#menu li > a:after {
color: #f7f7f7;
content: ' ▾';
font-size: 16px;
}
#menu li > a
nly-child:after {content: '';
}
#menu li ul li > a:after {
color: #f7f7f7;
content: '';
}
#menu li:hover > a:after {
content: ' ▾';
color: #000;
font-size: 16px;
}
#menu li:hover > a
nly-child:after {content: '';
}
#menu li ul li:hover > a:after {
content: '';
}
#menu ul ul li:first-child > a:after {
position: absolute;
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #fff;
} [/CODE]
[CODE lang="html" title="menu.html"]<div id="menu-wrap">
<ul id="menu">
<li><a href="">Стулья</a>
<ul>
<li><a href="">Металлические</a></li>
<li><a href="">Хромированные</a></li>
<li><a href="">Деревянные</a></li>
<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></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>
<ul>
<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>
<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>
<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>
<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>
<li><a href="">Урны</a></li>
</ul>
</li>
<li><a href="">Распродажа</a></li>
</ul>
</div>[/CODE]