Creating submenu with css in IE

Question

I want to create submenus with css in IE ,but IE does not work with hover action.I don't want to use JavaScript.How can I solve this?.Please tell me the way.Is there another way to create submenus without css and script?If anyone know, pls tell me.

Answer 1

What do you mean IE does not work with hover action? IE6 and earlier only supports :hover on A tags and IE7 and later supports it on any tag. It is definitely possible to make 100% CSS menus. Here's what I found with a quick Google search.

http://www.surguy.net/menu/index.html

Answer 2

IE6 and below supports the :HOVER pseudo-class on <a> tags only. You can make the <a> tag behave like a block level element (I assume you are currently using <ol><li>) by applying the following CSS:

a.submenu { display: block; }

Answer 3

I highly recommend using whatever:hover, an HTC extension that enables the use of the :hover pseudo-class on all elements, not just anchors, in IE6.

Usage is simple. Add this to the header, changing the path to reflect your setup:

<!--[if lte IE 6]>
    <style type="text/css">
     body{behavior:url(path/to/iehover.htc);}
    </style>
<![endif]-->

That's it!

Answer 4

You can use the following code for IE6 based on jQuery library

if (jQuery.browser.msie && navigator.userAgent.toLowerCase().indexOf('msie 6') > -1){
    jQuery(document).ready(function() {
        jQuery('.menu li').hover(
            function() {
                jQuery(this).addClass('hover');
            },

            function() {
                jQuery(this).removeClass('hover');    
            }
        );
    });
}

Please change the selector ".menu li" to yours and wrote in CSS in the following way .menu li:hover, .menu li.hover { ... }

Answer 5

I found this page but didn't have a chance to see if it was really CSS only. http://www.cssplay.co.uk/menus/final_drop.html

My original method seems to no longer work on most browsers and wouldn't validate.