Тэги вертикально
Жёлтые прямоугольные
by vovkasolovev
HTML
<body>
<ul>
<li class="top parent"><a><h3>Молочные продукты</h3></a>
<ul>
<li><a><h4>Из коровьего молока</h4></a></li>
<li><a><h4>Из козьего молока</h4></a></li>
<li><a><h4>Йогурты</h4></a></li>
<li><a><h4>Сыры</h4></a></li>
</ul>
</li>
<li class="top parent"><a><h3>Мясо и птица</h3></a>
<ul>
<li class="parent"><a><h4>Мясо</h4></a>
<ul>
<li><a><h5>Баранина</h5></a></li>
<li><a><h5>Говядина</h5></a></li>
<li><a><h5>Телятина</h5></a></li>
<li><a><h5>Свинина</h5></a></li>
<li><a><h5>Кролик</h5></a></li>
<li><a><h5>Фарши</h5></a></li>
</ul>
</li>
<li class="parent"><a><h4>Птица</h4></a>
<ul>
<li><a><h5>Курица</h5></a></li>
<li><a><h5>Индейка</h5></a></li>
<li><a><h5>Гусь</h5></a></li>
<li><a><h5>Утка</h5></a></li>
<li><a><h5>Перепелка</h5></a></li>
<li><a><h5>Яйца</h5></a></li>
</ul>
</li>
</ul>
</li>
<li class="top parent"><a><h3>Овощи и фрукты</h3></a>
<ul>
<li><a><h4>Овощи</h4></a></li>
<li><a><h4>Фрукты</h4></a></li>
<li><a><h4>Травы</h4></a></li>
<li><a><h4>Ягоды</h4></a></li>
<li><a><h4>Корнеплоды</h4></a></li>
</ul>
</li>
<li class="top parent"><a><h3>Чаи, травы и специи</h3></a>
<ul>
<li><a><h4>Травяные чаи</h4></a></li>
<li><a><h4>С ягодами</h4></a></li>
<li><a><h4>Для тонуса</h4></a></li>
<li><a><h4>Для спокойствия</h4></a></li>
</ul>
</li>
<li class="top parent"><a><h3>Готовая еда</h3></a>
<ul>
<li class="parent"><a><h4>Первое</h4></a>
<ul>
<li><a><h5>Супы</h5></a></li>
<li><a><h5>Бульоны</h5></a></li>
</ul>
</li>
<li class="parent"><a><h4>Закуски</h4></a>
<ul>
<li><a><h5>Соления, квашения</h5></a></li>
<li><a><h5>Овощи</h5></a></li>
<li><a><h5>Грибы</h5></a></li>
<li><a><h5>Паштеты</h5></a></li>
<li><a><h5>Закуски из мяса и дичи</h5></a></li>
<li><a><h5>Блины</h5></a></li>
<li><a><h5>Пир...CSS
body{font-family: sans-serif; background: white; color: #444; background:rgba(160,152,120,0.1);}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; line-height: 1.6em;}
h3 {font-size: 1.4em; border-bottom: 1px solid dashed;}
h4 {font-size:1.1em; border-bottom: 1px solid dashed;}
h5 {font-size: 1em; font-weight: 300; border: 1px dashed transparent;}
ul {margin: 0 -4px -4px -4px; padding: 0 0 0 -3px; background: transparent}
li { display:inline-block; list-style-type: none; padding: 3px 3px 3px 3px; border: 1px dashed transparent; font-size: 93%; transition: all ease-in 0.2s;background: transparent; vertical-align: top;}
li.top {display:table; padding: 3px 3px 3px 3px; border-left:4px solid transparent;}
li:hover{color: black;}
li.parent:hover { background: white}
li.top:hover{background: rgba(0,0,0,0.05);}
li>ul:hover {}
a {border:1px solid transparent; display: inline-block; padding: 0 3px; transition: all ease-in 0.2s; cursor: pointer; border-radius: 0px; border-bottom: 1px dotted gray; margin-bottom:3px}
a:hover {color: black!important; border:1px solid #C47900; box-shadow: 0 2px 2px -1px black; border-radius: 2px;}
a:hover, a.active:hover {
background: #fceabb;
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93));
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 );
}
a.active{ border:1px solid #C47900;background: #fbdf93;}
a.active + ul{clear:right}
ul ul...JavaScript
$(document).ready(function() {
$('ul>li').click(function() {
$(this).children('ul').slideToggle();
if($(this).children('a').class != 'active')
{
$(this).children('a').toggleClass('active')
}
else
{
$(this).children('a').removeClass('active')
}
return false;
});
});