Красивое выпадающее, темное, вертикальное меню для сайтов в системе uCoz.
В CSS вставляем:
Код
.menu {background:#555;padding:5px;border-radius:4px;}
.menu li sr a:after {content:open-quote;quotes:"\00BB" "\00ab";float:right;padding:0 5px 1px 5px;background:#444;border:1px solid #333;margin-top:-2px}
.menu li {list-style:none;margin:0;position:relative}
.menu li a {background:#444;padding:5px;color:#fff;text-shadow:0 1px 0 #222;text-decoration:none;display:block;border-top:1px solid #333}
.menu li a:hover {background:#555;}
.menu ul {width:170px;background:rgba(0,0,0, 0.6);border-radius:0 3px 3px 3px}
.menu ul a {background:none;color:#fff;display:block;border-top:1px solid #444}
.menu ul a:hover {background:rgba(255,255,255, 0.8);color:#000;text-shadow:0 1px 0 #fff}
.menu li ul {display:none;margin:-31px 0 0 100%;padding:0;z-index:1}
.menu li:hover ul {display:block;position:absolute}
Это вставить в то место, где будет находится меню:
Код
<div class="menu">
<li><sr><a href="">Ссылка 1</a></sr>
<ul>
<a href="">Пункт 1</a>
<a href="">Пункт 2</a>
<a href="">Пункт 3</a>
<a href="">Пункт 4</a>
</ul>
</li>
<li><sr><a href="">Ссылка 2</a></sr>
<ul>
<a href="">Пункт 1</a>
<a href="">Пункт 2</a>
<a href="">Пункт 3</a>
<a href="">Пункт 4</a>
</ul>
</li>
<li><a href="">Простая ссылка 1</a></li>
<li><a href="">Простая ссылка 2</a></li>
<li><a href="">Простая ссылка 3</a></li>
</div>
[l]ДЕМО
