http://s44.radikal.ru/i103/0811/9f/f838ba5a0677.jpg

Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

Код:
#menu, 
#menu ul { 
     border: 1px solid #b4b4b4; 
     background: #003a63; 
     float: left; 
     width: 300px; 
} 

#menu li { 
     float: left; 
     position: relative; 
     background: #003a63; 
} 

#menu a { 
     color: #fff; 
     text-decoration: none; 
     display: block; 
     width: 125px; 
     padding: 3px 10px; 
} 

#menu a:hover { 
     color: #000; 
     background-color: #9ad5ff; 
} 

#menu li:hover, 
#menu li.jshover { 
     background-color: #9ad5ff; 
} 

#menu li ul { 
     display: none; 
     position: absolute; 
     padding: 5px 2px; 
     width: 140px; 
} 

#menu li li a { 
     width: 118px; 
} 

#menu li:hover ul, 
#menu li.jshover ul { 
     background-color: #003a63; 
     display: block; 
} 

#menu li:hover li ul, 
#menu li.jshover li ul { 
     display: none; 
     width: 140px; 
} 

#menu li:hover li:hover ul, 
#menu li.jshover li.jshover ul { 
     display: block; 
}

3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

Код:
<html> 
<head> 
<link rel="stylesheet" href="style.css" type="text/css" /> 

<script type="text/javascript"> 
<!--//--><![CDATA[//><!-- 
       jsHover = function() { 
           var hEls = document.getElementById("menu").getElementsByTagName("LI"); 
           for (var i=0, len=hEls.length; i<len; i++) { 
               hEls[i].onmouseover=function() { this.className+=" jshover"; } 
               hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } 
           } 
       } 
       if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover); 
//--><!]]></script> 
</head> 
<body> 
<ul id="menu"> 
       <li><a href="/">Главная</a></li> 
       <li><a href="/">Меню</a> 
           <ul> 
               <li><a href="/">Пункт 1</a></li> 
               <li><a href="/">Пункт 2</a></li> 
               <li><a href="/">Пункт 3</a></li> 
           </ul> 
       </li> 
</ul> 
</body>

Заметим, что наше меню нормально работает во всех браузерах, включая IE6, который поддерживает параметр hover только для ссылок. Это так, благодаря следующему скрипту в нашем коде:

Код:
<script type="text/javascript"> 
<!--//--><![CDATA[//><!-- 
jsHover = function() { 
var hEls = document.getElementById("menu").getElementsByTagName("LI"); 
for (var i=0, len=hEls.length; i<len; i++) { 
hEls[i].onmouseover=function() { this.className+=" jshover"; } 
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } 
} 
} 
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover); 
//--><!]]></script>

4) Сохраняем и смотрим, что получилось.

Пояснения к коду:
display: none; - запрет показа элемента
display: block; - показ элемента блоком (при наведении)
Остальное разобрано в предыдущих уроках