What is the best practice for CSS-styled menu markup?

Question

So, I've been 'collecting' CSS menus for a while now (another term would be 'borrowing', yet another would be 'blatantly ripping off'), to learn from them and to potentially reuse some of the leetness in my own projects.

Being an oldschool HTML purist, I love the idea of styled <ul>s and <ol>s, and the better menus and tab interfaces tend to use this method, for accessibility or semantic soundness or whatever reason. I mainly like the method because it keeps my HTML source nice and clean.

Now, I've actually refactored my collection of CSS menus to fit one 'master' markup pattern that I've extrapolated from the most flexible examples out there, such as the CSS Zen Garden. It looks like this:

<div class="menustyle">
<ul>
    <li class="current"><a href="#" title="Page 1"><span>Home</span></a></li>
    <li><a href="#" title="Page 2"><span>Toys</span></a></li>
    <li><a href="#" title="Page 3"><span>About Us</span></a></li>
    <li><a href="#" title="Page 4"><span>Contact</span></a></li>
</ul>
</div>

<span class="clearit" /><br />

(the 'clearit' span at the end is used to set clear:both after menus that require it)

Anyway, I've seen variations on this markup on many sites, some with an extra enclosing <div>, some using a different word than current, some attaching the current class to the <a> tag rather than the <li>, and some leaving out the inner <span>. Everyone seems to have their own way of doing menu markup that's just a tiny bit different.

Anyway, after tinkering with a lot of menus, the above is what I've come up with, but I'm trying to figure out if there is an actual established best practice for this. I'd like to set up a simple CSS menu foundry at some point, and it would be nice to get some input on the markup before going any further.

EDIT: The question is not about Javascript menus. I know there are excellent scripted menus out there, and that they allow you to have submenus, more advanced animations and hover timing, shortcut keys, drop shadows, and everything else. But 90% of menus don't need those features, and are much better off using CSS for styling and hover effects.

Answer 1

Other than stripping out the span tags I think its fine.

There is no reason to have them becasue with your setup you can style the text however you want with

li a {/*styles*/}

You should also be able to remove the

<span class="clearit" /><br />

section as well. If you're trying to float just the ul inside of the div you might as well scrap the div. If you need the clear for some other reason you can do a

<br clear="all"/>

Answer 2

CSS menus are a pain in the rear and so 2005. All that cross-browser compatibility, IE javascript fix files and so on. Specifically to answer your question: they're no different today than they were three years ago because IE7 doesn't support :hover on non-links and IE6 still needs to be supported.

These days just download jQuery, install the Superfish plug-in and include this code:

$(function() {
  $("ul.menu").superfish();
});

and done. Even works on IE6 (with less features).

Answer 3

If you're interested in having submenus then I'd recommend checking out the YUI library. It provides you with a cross browser compatible submenu from markup.

http://developer.yahoo.com/yui/examples/menu/index.html

Answer 4

you can use clearfix class for UL (insdead of clearing span):

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}

Now, your menu will look like this:

<div class="menustyle">
<ul class="clearfix">
.....

Ofcourse, you can add those properties directly to UL to avoid any changes of html code :)