Тэги горизонтально
Зелёные полукруглые
by vovkasolovev
HTML
<body>
<ul>
<li class="top parent"><a><h3>Молочные продукты</h3></a>
<ul class="vertical">
<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 class="vertical">
<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 class="vertical">
<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>Закуски из мяса и...CSS
body{font-family: sans-serif; background: white; color: #444; background:white;}
h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; line-height: 1.6em; font-weight: 300;}
h3 {font-size: 1.4em; border-bottom: 1px solid dashed;}
h4 {font-size:1.1em; border-bottom: 1px solid dashed;}
h5 {font-size: 1em; border: 1px dashed transparent;}
ul { padding:0; background: transparent; margin:2px -4px -1px;}
ul:last-child{ margin:2px -1px -1px -4px;}
li { display:inline-block; list-style-type: none; padding: 3px; border: 1px dashed transparent; font-size: 93%; transition: all linear 0.2s;background: transparent; vertical-align: top; border-radius: 15px; border: 1px solid transparent; margin: 0 0 0 3px;}
li:first-child{margin: 0 0 0 3px}
li.top { padding: 3px 3px 3px 3px; border-left:4px solid transparent; border: 1px solid transparent}
li:hover{color: black; border: 1px solid transparent}
li.parent:hover {background: rgba(255,255,255,0.7); border: 1px solid green}
//li.top:hover{background: rgba(0,0,0,0.05);}
li>ul:hover {}
ul.vertical>li{display: table;margin: 0;}
ul.vertical>li.parent{display: table;margin: 0 0 0 3px;max-width: 425px;}
ul.vertical>li>ul.vertical{margin:0 3px 0 0}
//Круглое{}
a { display: inline-block; padding: 0 10px; transition: all ease-in 0.2s; cursor: pointer; border-radius: 14px; background: transparent}
a:hover {color: black!important;}
a:hover, a.active:hover {
background: #d9e011;
background: -moz-linear-gradient(top, #d9e011 0%, #9bc240 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9e011), color-stop(100%,#9bc240));
background: -webkit-linear-gradient(top, #d9e011 0%,#9bc240 100%);
background: -o-linear-gradient(top, #d9e011 0%,#9bc240 100%);
background: -ms-linear-gradient(top, #d9e011 0%,#9bc240 100%);
background: linear-gradient(to bottom, #d9e011 0%,#9bc240 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9e011', endColorstr='#9bc240',GradientType=0...JavaScript
$(document).ready(function() {
$('ul>li').click(function() {
$(this).children('ul').slideToggle();
if($(this).children('a').class != 'active')
{
$(this).children('a').addClass('active')
}
else
{
$(this).children('a').removeClass('active')
}
return false;
});
});