menu as unordered list horizontally or table?

I have an unordered list I'm displaying horizontally as the page's top menubar. I've gotten it to display relatively well, although I've been playing with the spacing for IE6 and IE7 cause it's not displaying properly. Shocking. In either case, is it better to use a table to display the menu or use some CSS hacks, which I can't find a way around? What is the best way to display the menu? I should add some of the options have dropdown menus using their own unordered lists.

Check out List-a-matic, it has a host of different menu templates that you can use as a base.

A simple horizontal list can be displayed using css and an unordered list

HTML

<div id="navcontainer">
 <ul id="navlist">
  <li id="active"><a href="#" id="current">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
 </ul>
</div>

CSS

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

It's hard to give a definitive answer without an SSCCE from your side (a plain <html> document including doctype and embedded styles) which reproduces exactly the problem you have. But I can at least tell that the common problem is that you didn't get the doctype right and that IE's boxmodel bug plays a role here.

If that's not the root cause, then the next possible cause is the fail in understanding how to use floats and/or inline/block elements. To get good and solid code examples to start with, Google "suckerfish menu".

EDIT:

You cant depend on display: inline-block to handle this because cross browser support is problematic. Use floats instead with dispaly: inline; position: relative.

I would continue on with the UL's. Dont use hacks for IE* though - use IE Conditionals to add different stylesheets for different versions of IE.

来源：https://stackoverflow.com/questions/2042661/menu-as-unordered-list-horizontally-or-table

标签

css

cross-browser