Can a css menu do this?

Answer 1

You can design a menu using HTML and CSS only. But to handle all the events [keyboard and mouse ] you have to use JavaScript.

Answer 2

Is it possible? Yes

Is it recommended? No

You still have to support IE6 and below which only supports the :hover pseudo-selector on <a> tags with an href attribute. Any other tag will have its :hover pseudo-selector ignored. For any other browser, you won't have that limitation.

By using the <a> tag, you are giving yourself the following limitations:

• No sub <a> tags, which means that the menu will basically lead to one place.
• No block level elements inside the <a> tag (which can be easily worked around by using display: block on inline elements. This means no <div> no <table> nor any other block level elements.

In a world without Internet Explorer 6 and below, this would rather be trivial to do. But considering that as of July 2009 there is still 27.21% of the web using IE6, you might not want to write them out.

Answer 3

Of course you can. Lists are nothing more than <li> tags. Inside an <li> tag you can put whatever you want:

<ul>
    <li>
       <img src="someimage.jpg" alt="alttext" />
       <p><a href="yourlink.html">Your link</a></p>
    </li>
</ul>

and then make your menu effect w/your CSS

EDIT ah, i see you only want to use tables. should have read more carefully. if you don't want to use javascript (why, i don't know), no, not w/css and html, at least not cross-browser. you can do it with the pseudoclass :hover which works for any element in modern browsers, but <IE6 won't know what to do with it. However, you should stop supporting IE6 anyways, so maybe you're ok :)

Answer 4

Well, yes. If you look at the source for the page you'll see a <ul> making it work. They certainly use JS -in that I disabled JS in Firefox and then reloaded the page, at which point the menu ceased working- but I'm not sure how necessary that is to the menu itself.

You can show an image next to each menu item either by using an <img /> tag in the (x)html or using a background-image in the css.

CSS-based approach:

<style type="text/css" media="all">
ul li {display: inline; position: relative;}

ul li ul {display: none; }

ul li:hover ul {display: block; position: absolute; top: 0; left: 0; }

ul li ul li {padding-left: 10px; background: #fff url(path-to-image.png) top left no-repeat; }
</style>

<ul>
<li>First item</li>
<li>Second item
    <ul>
        <li>Sub-level one</li>
        <li>Sub-level two</li>
    </ul></li>
<li>Third item</li>
</ul>

(x)html based approach:

<style>... /* will still need to be styled according to your theme */ ...</style>

<ul>
<li><img src="menu-icon-1.png" alt="menu-icon" />First item</li>
<li><img src="menu-icon-2.png" alt="menu-icon" />Second item
    <ul>
        <li><img src="menu-icon-2-1.png" alt="menu-icon" />Sub-level one</li>
        <li><img src="menu-icon-2-2.png" alt="menu-icon" />Sub-level two</li>
    </ul></li>
<li><img src="menu-icon-3.png" alt="menu-icon" />Third item</li>
</ul>

If you want the menu items to have unique icons/images associated with them, then you'd have to use specific ids in the (x)html, so it's not particularly less, or more, convenient to use one approach in favour of the other.

Answer 5

Regarding support for IE6: Have a look at ie7-js it helps with a lot of issues with backwards compatibility, including the use of :hover on elements other than a. I've verified that it works with the CSS solution presented by ricebowl.

EDIT: The good thing about this script is that it is only used by IE5.5 and IE6 (and IE7 if you use the latest version). The latest version makes IE7 behave more like IE8 when rendering a page, making it easier to write simple and good HTML/CSS.