Fluid Horizontal Menu - Using UL, CSS (and a table)

In the A List Apart article: Taming Lists there is a very simple example of using UL to markup a horizontal list. Making this into a fluid full width menu proved much more difficult than I thought, and I have provided the implementation here.

The broad requirements of this are:

• There is a color for the menu, and another color for the current item. The menu has a bottom border the same color as the current item.
• The menu must not wrap when browser is resized, it must always be a single horizontal row
• When browser width is smaller than menu, scrolling the viewport across will still display the menu bottom border
• When browser width is larger than the menu, the menu expands to 100% width
• The items in the menu are dynamically generated on the server (so the number of items may vary, as can the total possible width)

Show below, is the screenshot of the final product.

The final code to produce this menu is as follows:

<style type="text/css">
li, ul {
   padding: 0;
   margin:0;
}
table.menu {
   background-color: #CCC;
   border-bottom: 5px solid #8C78C5;
   width: 100%;
   padding: 0;
   border-collapse:collapse;
}
table.menu td, table.menu tr {
   border: 0; padding: 0;
}
table.menu ul {
   white-space: nowrap;
   padding: 4px 0px;
}
table.menu li{
   display: inline;
   list-style: none;
}
table.menu a{
   background-color: #CCC;
   padding: 4px 10px;
   color: black;
   text-decoration: none;
   border-left: 1px solid white;
}
table.menu a:hover {
   text-decoration: underline;
}
table.menu a.first {
   border-left: none;
}
table.menu a.current{
   color: white;
   background-color: #8C78C5;
}
</style>

<!--[if IE]>
<style type="text/css">
table.menu ul{
   width:110%;
}
</style>
<![endif]-->

<table class="menu"><tr><td><!--
  --><ul><!--
  --><li><a href="#" class="first">Spring MVC framework</a></li><!--
  --><li><a href="#">Struts MVC</a></li><!--
  --><li><a href="#" class="current">Tapestry</a></li><!--
  --><li><a href="#">JSF</a></li><!--
  --><li><a href="#">Java Server Pages</a></li><!--
  --></ul><!--
--></td></tr></table>

To summarise the main points of the implementation:

• The LI are inline, and the UL has white-space:nowrap so that the items are in a single row
• The background-color is defined in the anchor so that the entire "tab" is clickable
• To increase the height of each "tab", add padding to the anchor, and also to the UL because the anchors are inline elements
• We need the container to expand to accomodate its content regardless of browser viewport size, so that the bottom border stretches with the content. A table is used because IE doesn't suppport display:table* attributes
• Whitespace is commented out because for some reason compliant browsers render a gap
• An IE only rule is provided to solve a problem which appears to be collapsing related.

For the full explaination of this menu, see my article Fluid Horizontal Menu - Using Unordered List, XHTML, CSS (and a table)

This menu has been tested on IE6, IE7, Firefox 2, Opera 9, and Safari 3beta