To create a basic inline menu I would do the following. CSS: #nav {display:block; margin:0; padding:0;} #nav li {margin:0; padding:0; display:inline-block; float:left; width:auto; border-right:1px solid #333 } #nav li a {padding:2px 10px; background-color:#CCC; color:#333; text-decoration:none;} #nav li a:hover {background-color: #999; color:#006; } Code (markup): HTML: <ul id="nav"> <li><a href="">Item1</a></li> <li><a href="">Item2</a></li> <li><a href="">Item3</a></li> <li><a href="">Item4</a></li> </ul> Code (markup): That's a really basic inline list. But it should be a good starting point for you.
Pmek's example is a bit... flawed, in that there's a whole slew of redundant/unnecessary CSS in there which doesn't actually work across all browsers (though it's entirely common to see these types of mistakes). UL's are inherently display:block, you don't need to restate that. Might be a good idea to turn off bullets while in there, LI cannot be trusted so skip styling them altogether so as to avoid the IE7 staircase effect, and not only can IE not set inline-block on block-level elements (like LI) there is no point in setting a display state on the LI since they are FLOATING (unless you are using display:inline as a margin doubling fix)... Though these mistakes are ENTIRELY what I've come to expect from people who put their CSS all on one line. #nav { list-style:none; margin:0; padding:0; } #nav li { display:inline; /* remove from flow */ } #nav a { float:left; margin:0; padding:2px 10px; text-decoration:none; color:#333; background:#CCC; border-right:1px solid #333; } #nav a:active, #nav a:focus, #nav a:hover { color:#006; background:#999; } Code (markup): Functionally identical - actually, that's not 100% true, it's also keyboard navigation friendly thanks to the inclusion of :active and :focus, and of course removes bullets (which showed up in IE)