<ul id="menu">
<li>A lovely Tab
<ul><li>sub tab #1</li>

<li>sub tab #2</li>
</ul>
</li>
<li>A lovely Tab#2
<ul><li>sub tab #21</li>

<li>sub tab #22</li>
</ul>
</li>

ul { /*this applies to all ul tags*/
margin: 0; padding: 0; /*stops them moving around too much*/}
ul#menu li { list-style: none; float: left; padding: 5px; }
ul#menu li ul { display: none; /*hides the submenu clever bit now:*/
position: absolute; top: auto; left: auto; /*makes it appear below the item*/ }

/*now we need to show it on hover*/
ul#menu li:hover ul { display: block; }

/*now we style the sub menus li's*/
ul#menu li ul li { display: block; float: none; /*makes them appear on top of each other*/ }