Updated the XP sytled menus to use either a definition list &lt;dd&gt; or an unordered list &lt;ul&gt;<!--more-->
There has been a growing trend in the use of unordered lists within CSS 
based menus instead of nested DIV tags. Here I update the XP Style Menus
to follow this trend and upon the requests of some fellow webmasters. 
Alas, I add a twist... I give two methods of formating the menus... a 
definition list or an unordered list.<br><br>

In my preliminary compatibility tests, I found that using a definition list 
gave better backwards compatibility. It degraded better in non-standards 
compliant browsers and just plain looked great.<br><br>

I also found that some versions of Windows Internet Explorer did not like my 
menu separator rules. Line height was not the 1 pixel as the rule states. 
Test results have varied and I am working to narrow the problem down.<br><br>

The trade-off for using definition lists versus an unordered list is 
that of (backwards) compatibility over accessibility. If your main concern 
is with accessbility, then use the unordered list method. On the other hand, 
if your concern is with compatibility, then use the definition list method. 
If you are not sure, use the unordered list method. Personally, I would use the 
definition list method.<br><br>
<!--nextpage-->
<strong>New rules for XP Menus</strong><br>
This updated version adds three rules in order to use definition/unordered 
lists. Additionally, the #menubar ID must be prepended to each menubar class. 
Change .menubar-separator and .menubar-selected and .menubar-selected>img to 
#menubar .menubar-separator and #menubar .menubar-selected and #menubar 
.menubar-selected>img<br><br><br>

The first new rule sets the margin and padding of the DL and UL elements to 
zero. List-style sets the values to none. Also, the list-style may or may 
not apply to the DL or UL element and exists for redunancy.
<pre style="border:1px solid #000; background:#FFF; padding:3px;">
#menubar dl, #menubar ul {
	display: block;
	list-style: none outside none;
	margin: 0px;
	padding: 0px;
	width: auto;
}
</pre>
<br>

The second is simaliar to the one above. This rule sets the margin and padding of 
the DD, DT, and LI elements to zero. Here the list-style applies only to the LI 
element. The box rule for display is set to inline as a workaround for a bug 
that exists within IE's CSS box model.<br><br>

The primary reason for not joining this rule with the one above is that the list 
items may require alternate style formatting. This will be done by having separate 
rules for the list and list items.<br>
<pre style="border:1px solid #000; background:#FFF; padding:3px;">
#menubar dd, #menubar dt, #menubar li {
	display: inline;
	list-style: none outside none;
	margin: 0px;
	padding: 0px;
	width: auto;
}
</pre>
<br>

The last rule is to reset the display value to block. Only browsers that 
recongize the child selectors will apply this rule (currenly any Gecko based, 
Opera, and Konqueror).<br>
<pre style="border:1px solid #000; background:#FFF; padding:3px;">
html>body #menubar dd, html>body #menubar dt, html>body #menubar li {
	display: block;
	width: auto;
}
</pre>
<!--nextpage-->
<strong>The lists</strong><br>
Creating the menus is much easier now... only a single DIV tag encapsulates the lists (definition or unordered).<br><br>

Definition list based menu.<br>
<pre style="border:1px solid #000; background:#FFF; padding:3px;">
&lt;div id="menubar"&gt;
  &lt;dl&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/home.gif" ..... align="top"&gt;Homepage&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/products.gif" ..... align="top"&gt;Products&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt class="menubar-separator"&gt;&nbsp;&lt;br&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/online.gif" ..... align="top"&gt;Online Store&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/downloads.gif" ..... align="top"&gt;Downloads&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt class="menubar-selected"&gt;&lt;img src="images/support.gif" ..... align="top"&gt;Support&lt;br&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/aboutus.gif" ..... align="top"&gt;About Us&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt class="menubar-separator"&gt;&nbsp;&lt;br&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/corporate.gif" ..... align="top"&gt;Corporate&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
    &lt;dt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/worldwide.gif" ..... align="top"&gt;Worldwide&lt;br&gt;&lt;/a&gt;&lt;/dt&gt;
  &lt;/dl&gt;
&lt;/div&gt;
</pre>
<br>
Unordered list based menu.<br>
<pre style="border:1px solid #000; background:#FFF; padding:3px;">
&lt;div id="menubar"&gt;
  &lt;dl&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/home.gif" ..... align="top"&gt;Homepage&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/products.gif" ..... align="top"&gt;Products&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt class="menubar-separator"&gt;&nbsp;&lt;br&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/online.gif" ..... align="top"&gt;Online Store&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/downloads.gif" ..... align="top"&gt;Downloads&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt class="menubar-selected"&gt;&lt;img src="images/support.gif" ..... align="top"&gt;Support&lt;br&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/aboutus.gif" ..... align="top"&gt;About Us&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt class="menubar-separator"&gt;&nbsp;&lt;br&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/corporate.gif" ..... align="top"&gt;Corporate&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
    &lt;lt&gt;&lt;a href="xyz.html"&gt;&lt;img src="images/worldwide.gif" ..... align="top"&gt;Worldwide&lt;br&gt;&lt;/a&gt;&lt;/lt&gt;
  &lt;/dl&gt;
&lt;/div&gt;
</pre>
<br><br>

<p><strong>Known Issues</strong>
<ul>
<li>Windows IE versions 5.0+ may have problems menu item separator, it will not be 1 pixel in 
	height. IE 6.x does not exibt this problem.</li>
</ul>
</p>

<br><br>

<p><strong>Download examples</strong><br>
<a href="/articles/xpmenu/standards_list.html" target="_blank">Demo Standards Version (Definition and Unordered lists)</a><br><br>
<a href="/articles/xpmenu/mozillaie_list.html" target="_blank">Demo Mozilla / Windows IE Version (Definition and Unordered lists)<br><br>
<a href="/articles/xpmenu/examples_list.zip">examples_list.zip</a><br><br>
<!--noteaser-->