Below is the css for my menu

#menu

{ position: absolute; left: 170px; top: 92px; background: #336699; float: left; z-index:50; }

menu ul

{ list-style: none; margin: 0; padding: 0; width: 9em; float: left; }

menu a, #menu h2

{ font: bold 11px/20px arial, helvetica, sans-serif; display: block; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 4px 3px; }

menu h2

{ color: #fff; background: #336699; text-transform: uppercase; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-right-width: 1px; }

menu a

{ color: #fff; background: #79A3CF; text-decoration: none; }

menu a:hover

{ color: #a00; background: #fff; }

menu li

{ position: relative; }

menu li ul li

{ position: relative; width: 12em; }

menu ul ul

{ position: absolute; z-index: 500; }

menu ul ul ul

{ position: absolute; top: 0; left: 100%; }

div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; }

div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { display: block; }

Here is my html design for the menu. It is a horizontal menu with dropdown submenus

<div id="menu">
    <ul>
      <li><h2>Computers</h2>
        <ul>
             <li>subitem
                  <ul><li>subitems</li>
             </li>
             <li>submitem</li>
             <li>submitem</li>
      </li>
     <li><h2>Network</h2>
                 <ul><li>subitems</li>
     </li>
    </ul>
</div>

I am using the minified version of the whatever hover script. Checked few posts here on this issue but couldn't solve the problem. The submenus are not appearing on IE6 and IE7. I trid adding

<!--[if lt IE 8]>

but no results...