Drupal theme - How to theme menu supporting IE7 and IE6 When you generate menu using Drupal, the code looks like this.

HTML code

<div id="nav">
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a title="" href="href="#"">menu01</a>
    <ul class="menu">
        <li class="leaf first"><a title="" href="href="#"">submenu 01</a></li>
        <li class="leaf"><a title="" href="#">submenu 02</a></li>
        <li class="leaf"><a title="" href="#">submenu 03</a></li>
        <li class="leaf last"><a title="" href="#">submenu 04</a></li>
    </ul>
    </li>
    <li><a title="" href="#">menu02</a>
    <ul class="menu">
        <li class="leaf first"><a title="" href="#">submenu 01</a></li>
        <li><a title="" href="#">submenu 02</a></li>
        <li><a title="" href="#">submenu 03</a></li>
    </ul>
    </li>
    <li><a title="" href="#">menu03</a>
    <ul class="menu">
        <li class="leaf first"><a title="" href="#">submenu 01</a></li>
        <li><a title="" href="#">submenu 02</a></li>
    </ul>
    </li>
    <li><a title="" href="#">menu04</a>
    <ul class="menu">
        <li class="leaf first"><a title="" href="#">submenu 01</a></li>
        <li class="leaf last"><a title="" href="#">submenu 02</a></li>
    </ul>
    </li>
</ul>
</div>

Step 2

add some style.css

#nav ul.menu {
 margin: 0;
 padding: 0;
 list-style: none;
}
#nav li{
  margin: 0 0 0 0px;
  padding: 0 0 0 0px;
  
  display: block;  
  position: relative;

  border:solid 1px #c9dea1;
}
#nav li ul{
  display: none;
  position: absolute;
  left: 159px;
  top: 0;
}
#nav li.hover ul,
#nav li:hover ul
{  
    display: block;
    width: 180px;   
}
#nav a.active{
  color: #006600;
}
#nav li a{
  display: block;
  text-decoration: none;
  
  padding: 5px;
  background-color: #efefef;
}
#nav ul,
#nav ul li,
#nav li.leaf
{
  list-style: none;
  list-style-image: none;
  list-style-type: none;
}

Don't be happy yet. There are evil IE7 and IE6 are waiting for you.

for IE7 patch

 html ul li { height: 1%; }
* html ul li a { height: 1%; }

#nav ul.menu li
{
  height: 1%!important;
  hasLayout: 1;
  zoom: 1;
  display: inline;
  width: 160px;
}

for IE6 patch : there could be some reason dropdown menu doesn't work properly. when rollover first element on the list element, 2nd level of drop down is suddenly disappeared...so I need to coded like this

 #nav ul.menu li
{
  height: auto;
  hasLayout: 1;
  zoom: 1;
  display: block;
  width: 160px;
}

#nav ul.menu li a{    
 zoom: 1;
 hasLayout: 1;
 display: inline-block;
 width: 150px;
}

This is works for me.

Bonus - JQuery for IE7 and IE6 browser

 if(Drupal.jsEnabled){
 $(document).ready(function() {      	
   
    $('#nav li').hover(
	  function(){
	    $(this).addClass("hover"); 
	  },
	  function(){
	    $(this).removeClass("hover");
	  }								
    );
 });
}

Reference site

http://drupal.org/project/syntaxhighlighter
http://alexgorbatchev.com/SyntaxHighlighter/download/