Css-navigaatio

Heippa,

Olen täysin käsi koodarina, joten kysäisen fiksummilta apua. Minulla on css, jolla saa toimivan drop down menun, joka näyttää jotakuinkin tältä http://www.alistapart.com/d/horizdropdowns/horizontal.htm

Haluaisin kuitenkin navigaation, jossa pääotsikot olisivat vierekkäin ja alaotsikot aukeaisivat pääotsikon alle. Mitä tässä koodissa pitäisi muuttaa, jotta saisin sen toimimaan niin.

Tiedän, että netti on varmasti pullollaan ohjeita, ja olen jo aika monta niistä kokeillut. Tämä on löytämistäni ainoa joka toimii nätisti useammassa selaimessa ja on muutenkin inhimillisen näköinen. Sen takia kysäisen asiaa täältä, josko muokkaamalla tätä voisi onnistua.

Ja tässä vielä se css:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i

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

Kiitos!!!