Кто в HTML не шарит - можете даже не смотреть...

Ну шарю.
А причём тут HTML?
Без скриптов не обойтись.

JavaScript
HTML это разметка а не скриптока страницы ;)

скачай скрипт. и привенти к странице, только не путуй яву и PHP

Вставь скрипт

Это вставляем в BODY

<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></li>
</ul>

А это в HEAD

<style>BODY {
FONT: 11px verdana
}
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; PADDING-TOP: 0px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none
}
UL LI {
POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: 149px; POSITION: absolute; TOP: 0px
}
UL LI A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #fff; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; COLOR: #777; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 0px solid; TEXT-DECORATION: none
}
HTML UL LI {
FLOAT: left; HEIGHT: 1%
}
HTML UL LI A {
HEIGHT: 1%
}
UL LI A:hover {
BACKGROUND: #f9f9f9; COLOR: red
}
LI UL LI A {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}

</style>
<script>

startList = function()
if (document.all&&document.getElementById) {
menusRoot = document.getElementById("menus");
for (i=0; i<menusRoot.childNodes.length; i++) {
node = menusRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";//osw
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;</script>