Вертикално меню с CSS

ето едно просто уроче за това как да си направим вертикално падащо меню с CSS

това го туряте между <head> и </head>

<style type="text/css">

body {
behavior:url("../htc/csshover.htc");
}

* {
font-family:arial,tahoma,verdana,helvetica;
font-size:12px;
}

/* the menu */

ul,li,a {
display:block;
margin:0;
padding:0;
border:0;
}

ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
}

li {
position:relative;
padding:1px;
padding-left:26px;
background:url("images/item_moz.gif") no-repeat;
z-index:9;
}
li.folder { background:url("images/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */

a {
padding:2px;
border:1px solid white;
text-decoration:none;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */

li a.submenu {
background:url("images/sub.gif") right no-repeat;
}

/* regular hovers */

a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}

/* hovers with specificity */

li.folder:hover { z-index:10; }

ul ul, li:hover ul ul {
display:none;
}

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

</style>

а това между <body> и </body>

<ul id="menu">
<li><a href="#"> lorem </a></li>
<li class="folder">
<a href="#" class="submenu"> adipiscing </a>
<ul>
<li><a href="#"> dolor </a></li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> vestibulum </a></li>
</ul>
</li>
<li class="folder">
<a href="#" class="submenu"> consectetuer</a>
<ul>
<li><a href="#"> elit </a></li>
<li><a href="#"> ipsum </a></li>
<li><a href="#"> Donec </a></li>
</ul>
</li>
<li><a href="#"> sit amet </a></li>
</ul>