Vertical to Horizontal List

Author: Christy Collins

Comments: "This was made for an HTML adaption of a Flash site: http://www.jimbastardo.com. A poster named Scott from css-discuss helped get the second list inline with the first main list item by suggesting the absolute positioning".

Browser support chart

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
ul#navlist
{
list-style-type: none;
position: relative;
}

ul#navlist li a
{
background: transparent url(http://www.loudjoy.com/greenbullet.gif) left center no-repeat;
padding-left: 12px;
text-align: left;
font: bold 10px arial, verdana, lucida, sans-serif;
text-decoration: none;
color: #699;
line-height: 22px;
margin: 0;
text-transform: uppercase;
}

ul#navlist li a:hover
{
background: transparent url(http://www.loudjoy.com/greybullet.gif) left center no-repeat;
color: #666;
}

ul#navlist li a#current
{
background: transparent url(http://www.loudjoy.com/greybullet.gif) left center no-repeat;
color: #666;
}

#navlist
{
margin: 0 0 0 65px;
padding: 0;
text-align: left;
}

#intnavtable { width: 100%; }
#intnavcell { width: 450px; }

/*subnavlist */
ul#subnavlist li
{
display: inline;
list-style-type: none;
padding-left: 20px;
font: bold 10px arial, verdana, sans-serif;
line-height: 22px;
}

#subnavlist a
{
text-decoration: none;
color: #699;
}

#subnavlist a:hover
{
text-decoration: none;
color: #666;
}

#subnavlist
{
text-align: left;
margin: 0;
padding-left: 0;
}

ul#subnavlist li a#subcurrent { color: #666; }

ul#navlist ul
{
position: absolute;
top: 0;
left: 4em;
}

ul#navlist ul li a, ul#navlist ul li a:hover, ul#navlist ul li a#current { background-image: none; }


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.