Подобное меню еще не делал, в общем, так выглядит меню в разных браузерах:
Опера
Мозилла
Хром
IE
HTML-код:
Code
<div class="menu">
<ul>
<li><a href="/"><span class="menul"/><span class="menubg">Ссылка</span><span class="menur"/></a></li>
<li><a href="/"><span class="menul"/><span class="menubg">Ссылка</span><span class="menur"/></a></li>
<li><a href="/"><span class="menul"/><span class="menubg">Ссылка</span><span class="menur"/></a></li>
<li><a href="/"><span class="menul"/><span class="menubg">Ссылка</span><span class="menur"/></a></li>
</ul>
</div>
CSS-код:
Code
.menu{float:right;padding-top:35px;}
.menu ul {list-style:none;margin:0;padding:0;font-size:20px;color:#fff;}
.menu ul li {height:34px;float:left;display:block;margin-right:5px;}
.menu ul li a {text-decoration:none;color:#fff;}
.menu ul li .menul {background:url(img/menul.png) no-repeat;background-position:0% 0%;padding:11px 0 10px 14px;}
.menu ul li .menubg {background:url(img/menubg.png) repeat;background-position:0% 0%;padding:11px 0 10px 0;}
.menu ul li .menur {background:url(img/menur.png) no-repeat;background-position:0% 0%;padding:11px 14px 10px 0;}
.menu ul li:hover .menul {background:url(img/menul.png) no-repeat;background-position:0% 100%;padding:11px 0 10px 14px;}
.menu ul li:hover .menubg {background:url(img/menubg.png) repeat;background-position:0% 100%;padding:11px 0 10px 0;}
.menu ul li:hover .menur {background:url(img/menur.png) no-repeat;background-position:0% 100%;padding:11px 14px 10px 0;}
Архив с изображениями:
http://rghost.ru/18132801
Пробовал к .menu ul li .menur применить абсолютное позицирование, но тоже вышло коряво, потому что руки корявые, к сожалению...
