Написал код
как сделать вертикальное меню на css и дописал выпадающий список. Такое решение может пригодится для большинства сайтов, где много пунктов меню, а место ограничено. Код не сложный, внедряется легко. Как меню будет выглядеть в конечном итоге, можно увидеть по ссылке ниже
[spoiler="Код css:"]
.menop {
color: #fff;
white-space: pre;
float: left;
width: 25%;
background: #ADACAC;
border: 1px solid #fff;
padding-left: 5%;
margin-right: 10%;
min-height:385px;
}
.menop:hover {
background: #FCD3D3;
border: 1px solid #FAF71D;
color: #540E0E;
}
.menop ul li a{
color: #fff;
display:block;
text-decoration: none;
width: 100%;
border-bottom: #540E0E;
}
.menop ul li a:hover{
display:block;
text-decoration: none;
width: 100%;
color: #540E0E;
}
.menop ul {
list-style: none;
margin: 0;
padding: 0;
}
.menop ul li {
position: relative;
}
.menop ul li ul li a {
display: block;
border: 1px solid #000;
background: #ADACAC;
padding: 5px;
text-decoration: none;
color: #fff;
margin: 0;
padding: 5px;
border-radius: 5px;
}
.menop ul li ul li a:hover {
display: block;
border: 1px solid #E23131;
background: #ADACAC;
padding: 5px;
text-decoration: none;
border-radius: 8px;
}
.menop li ul {
display: none;
left: 35px;
position: absolute;
top: 0;
}
.menop li:hover ul {
display: block;
text-decoration: none;
}
[/spoiler]
[spoiler="Код html:"]
<a href="/koro/">
<div class="menop" style="min-height:270px;">
г
л
а
в
н
а
я
</div></a>
<div class="menop" style="min-height:270px;"><ul><li><a href="/koro/dizajn/">
д
и
з
а
й
н
</a>
<ul>
<li><a href="/">1) гостиная</a></li>
<li><a href="/">2) спальня</a></li>
<li><a href="/">3) ванная</a></li>
<li><a href="/">4) кухня</a></li>
<li><a href="/">5) детская</a></li>
<li><a href="/">6) входная группа</a></li>
<li><a href="/">7) кабинет</a></li>
</ul></li></ul>
</div>
<a href="koro/o-nas/">
<div class="menop" style="min-height: 458px">
о
н
а
с
</div></a>
<div class="menop" style="min-height: 458px"><ul><li><a href="/koro/">
с
т
и
л
и
в
д
и
з
а
й
н
е
</a>
<ul><li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li>
<li><a href="/">дизайн кровати</a></li></ul>
</li></ul>
</div>
<a href="/koro/prajs/">
<div class="menop">
у
с
л
у
г
и
и
ц
е
н
ы
</div></a>
<a href="/arhitektura/">
<div class="menop">
а
р
х
и
т
е
к
т
у
р
а
</div></a>
[/spoiler]
Пример -
http://jsfiddle.net/prolisk/eoydxdun/1/
789.png ( 379,96 килобайт )
Кол-во скачиваний: 1173Юзаем, спрашиваем, благодарим ;-)