Creating submenu with css in IE

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 { ... }

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

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; }

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!

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.