How to make Dropdown menu using :hover on <a> in place of hover on <ul>?_问答_开发者

IE 6 only support :Hover on <a> then can we make css drop down using :hover on <a>

http://htmldog.com/articles/suckerfish/dropdowns/

This example use JavaScript to add hover o开发者_Go百科n LI

'sfhover' class to li elements in the 'nav' id'd ul element when they are 'moused over' and removes it, using a regular expression, when 'moused out'.

So now we've got the Suckerfish pumping out new classes, the next step is to simply duplicate the :hover selector with 'sfhover' class selectors:

You can sort of make it work. The code below displays a functional menu that relies on a:hover to trigger display. However, it comes with a few caveats:

Since you can't nest <a /> tags in HTML or XHTML, you're limited to a single level of menu items.
For the same reason, you have to use JavaScript onclick event handlers to handle user clicks on menu items.
IE6 seems to require a :hover rule on the anchor tag itself in order to trigger hover behavior. Without the #menu:hover rule, the #menu:hover span was ignored. The rule needs to have at least one style assignment in it, and not all properties seem to work (e.g. background-color or border worked, but color didn't).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
            position: relative;
        }

        #menu span {
            display: none;
        }

        /* I'm using <b /> tags for the submenu items, just to make the styling easier. */
        #menu span b {
            display: block;
            font-weight: normal;
        }

        /* IE6 seems to require some :hover rule on the anchor element itself.
           Without it, the '#menu:hover span' rule below is ignored. */
        #menu:hover {
            border: none;
        }

        #menu:hover span {
            background-color: #cccccc;
            cursor: pointer;
            display: block;
            position: absolute;
            top: 1em;
            left: 10px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <span>
                <b onclick="alert('Item 1!');">Item 1</b>
                <b onclick="alert('Item 2!');">Item 2</b>
                <b onclick="alert('Item 3!');">Item 3</b>
            </span>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>

UPDATE: IE6 does sort of work with nested <a /> elements. I tried embedding a link within a submenu, and it displayed properly but mousing over the inner link caused the outer link to lose :hover, and the menu would disappear out from under the cursor.

However, apparently if you wrap the menu in a table (as demonstrated here), it will work. Note that the below code works, but won't validate and might blow up in other browsers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Menu in IE6</title>
    <style type="text/css">
        #menu {
            background-color: #cccccc;
            color: black;
            text-decoration: none;
        }

        #menu ul {
            display: none;
        }

        #menu:hover {
            border: none;
        }

        #menu:hover ul {
            background-color: #cccccc;
            display: block;
            margin: 0;
            margin-left: 10px;
            padding: 0;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" id="menu">Menu
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <ul>
                            <li><a href="http://www.google.com">Google</a></li>
                            <li><a href="http://www.yahoo.com">Yahoo</a></li>
                            <li><a href="http://www.stackoverflow.com">Stack Overflow</a></li>
                        </ul>
                    </td>
                </tr>
            </table>
        </a>
        <p>
            Lorem ipsum doler sit amet...
        </p>
    </div>
</body>
</html>

Yes you can as long as you nest the sub menu within the anchor.

<a class="hoverMenu">
  MenuText
  <div class="subMenu">
    SubMenuText
  </div>
</a>

.hoverMenu .subMenu { display: none; }
.hoverMenu:Hover .subMenu { display: block; }

I haven't tested this out for IE6, but this is the basic idea behind an all css menu in any other browser. Not sure if you can nest anchors or not.

Try ie7-js.

If javascript is absolutely not an option, you can use one of the many examples of CSS only dropdown menus, such as The ULTIMATE CSS only drop-down menu by Stu Nicholls.

In my opinion, making IE6 behave all around via js is preferable to css hacks that have to be implemented for every feature it lacks.