1. Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка:
CSS————————————————————
div, ul, li, a {margin:0; padding:0;}

div {margin:50px 0 0 50px;}
ul {
width:150px; /*ширина меню – совпадает с шириной пунктов меню*/

list-style:none; /*удаляем маркеры -оказывается можно писать это и для ul и для li!!!*/

border-bottom:1px #000000 solid;

}

ul li {
position:relative; /*необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю*/
}
li ul {
position:absolute;
left: 149px;
top:0;
display:none;
}

a {
text-decoration:none;
text-align:center;
text-transform:uppercase;
display:block;
padding:5px; /*если меню горизонтальное то так думаю лучше паддинг делать у li, чтобы в зафлоаченном элменте граница не вылазила за li*/
border:1px #000000 solid;
border-bottom:none;
}

li:hover ul {
display:block; /*для того чтобы появлялись подменю при наведении мыши*/
}
XHTML————————————————————
<div>
<ul>
<li><a href=»#»>вести 0</a></li>
<li><a href=»#»>вести 1</a>
<ul>
<li><a href=»#»>новости1</a></li>
<li><a href=»#»>новости1</a></li>
<li><a href=»#»>новости1</a></li>
<li><a href=»#»>новости1</a></li>
<li><a href=»#»>новости1</a></li>
</ul>
</li>
<li><a href=»#»>вести 2</a>
<ul>
<li><a href=»#»>новости2</a></li>
<li><a href=»#»>новости2</a></li>
<li><a href=»#»>новости2</a></li>
<li><a href=»#»>новости2</a></li>
<li><a href=»#»>новости2</a></li>
</ul>
</li>
<li><a href=»#»>вести 3</a>
<ul>
<li><a href=»#»>новости3</a></li>
<li><a href=»#»>новости3</a></li>
<li><a href=»#»>новости3</a></li>
<li><a href=»#»>новости3</a></li>
<li><a href=»#»>новости3</a></li>
</ul>
</li>
</ul>
</div>

Теперь нам надо задать положение элементов списка. По умолчанию будут расположены вертикально, что нам и нужно. Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю. ul li { position: relative; }

Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор.

li ul { position: absolute; left: 149px; top: 0; display: none; }

Используя атрибуты «left» и «top», мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту «left» значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы. Нам надо также присвоить атрибуту «display» значение «none», так как мы не хотим видеть подменю при открытии страницы. Давайте зададим стили для ссылок.

a { display: block; text-decoration: none; padding: 5px; border: 1px solid #ccc; border-bottom: none; }

Важно присвоить атрибуту «display» значение «block», ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.

/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */

Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута «height», чтобы ссылки отображались как блочные элементы. Также обратите внимание, что мы забыли «закрыть» блок меню. Добавим дополнительно нижнюю границу к каждому элементу списка. Итак, вот полный список стилей для ul:

ul {list-style: none; width: 150px; border-bottom: 1px solid #ccc; }

Нам надо сделать так, чтобы подменю появлялись в тот момент, когда курсор находится над элементом списка. li:hover ul { display: block; }

IE/Win опять поломал всю красоту – не желает делать то, что ему сказано. Он понимает псевдокласс :hover лишь для тега <a> – так что li:hover, на который у нас завязано появление подменю, ему ни о чём не говорит.

Капелька JavaScript приведет IE в чувство (разрыв строк отмечен символом «»» – Ред.):

startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById(«nav»); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName==»LI») { node.onmouseover=function() { this.className+=» over»; } node.onmouseout=function() { this.className=this.className.replace » (» over», «»); } } } } } window.onload=startList;

Итак, правила для hover таковы:

li:hover ul, li.over ul { display: block; }

Мы также должны дополнительно связать JavaScript с нашим главным списком, добавив это:

<ul id=»nav»>

2. Меню с плашкой.

Плашка сделана рамкой справа у тэга a:

ul li a {
  display:block;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
}

ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}