Multicolumn Dropdown Menu - Error in IE

[tceramesh]

Hi Friends,
I Created one drop down menu by using CSS. It is perfect in Firefox but in IE it creates some problem.
in the header section the drop down menu appear,, below that i used one table to put one list menu box..

The problem is, when we mouse over the drop down menu , list box appears in front of the drop down area.. how can i tackle this . The Error occurs only in IE not in Firefox.

 
Here the Code : For CSS
 
<style type="text/css">
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 600px; /*For KHTML*/
  list-style: none;
}
 
ul#navmenu-h li {
    margin: 0;
    border: 0 none;
    padding: 0;
    float: left; /*For Gecko*/
    display: inline;
    list-style: none;
    position: relative;
    width: 185px;  
 
}
 
 
ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 600px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
 
}
 
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
 
ul#navmenu-h ul li {
  width: 300px;
 
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
 
/* Root Menu */
ul#navmenu-h a {
  border: 1px solid #FFF;
  border-right-color: #D6C7A7;
  border-bottom-color: #D6C7A7;
  text-align:left;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #F1ECE1;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
 
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #D6C7A7;
  color: #FFF;
    text-align:left;
 
}
 
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #F1ECE1;
  color: #666;
 
 
 
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #D6C7A7;
  color: #FFF;
}
 
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #F1ECE1;
  color: #666;
}
 
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #D6C7A7;
  color: #FFF;
}
 
/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  background: #F1ECE1;
  color: #666;
}
 
/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  background: #D6C7A7;
  color: #FFF;
}
 
ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}
 
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}
 
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}
 
</style>
 
<script type="text/javascript">
navHover = function() {
    var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
        lis[i].onmouseover=function() {
            this.className+=" iehover";
        }
        lis[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);</script>
 
 
 
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="top"> <ul id="navmenu-h">
 
    <li><a href="#"> Top Songs &raquo;</a>
        <ul> <li><a href="#">Song 1</a></li>
          <li><a href="#"> Song 1</a></li>
           <li><a href="#">Song 1</a></li>
            <li><a href="#">Song 1</a></li>
             <li><a href="#">Song 1</a></li>
              <li><a href="#">Song 1</a></li>
               <li><a href="#">Song 1</a></li>
              <li><a href="#">Song 1</a></li>
                 <li><a href="#">Song 1</a></li>
                  <li><a href="#"> Song 1</a></li>
                   <li><a href="#">Song 1</a></li>
                    <li><a href="#">Song 1</a></li>
                     <li><a href="#">Song 1</a></li>
                      <li><a href="#">Song 1</a></li>
                       <li><a href="#">Song 1</a></li>
                        <li><a href="#">Song 1</a></li>                      
               <li><a href="#">Top  REVIEW sites  &raquo;</a>
              <ul>
                <li><a href="#"> REVIEW sites 1</a></li>
                <li><a href="#"> REVIEW sites 2</a></li>
                <li><a href="#"> REVIEW sites 3</a></li>
                <li><a href="#"> REVIEW sites 4</a></li>         
              </ul>
          </li>
 
 
        </ul>
    </li>
 
  </ul></td>
    </tr>
    <tr>
      <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="20%" align="left" valign="top">&nbsp;</td>
          <td width="80%" align="left" valign="top"><form name="form1" method="post" action="">
 
            <select name="select">
              <option>Top A - Z Songs</option>
            </select>
 
                    </form>
          </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="center" valign="top">&nbsp;</td>
    </tr>
  </table>
 

[acoder]

The problem is, when we mouse over the drop down menu , list box appears in front of the drop down area.

This occurs in IE6 and below and is fixed in IE7. For IE6-, either hide the list box when you mouse over the menu (a bit of a fix), or use iframe shimming (place an iframe underneath the menu).

[tceramesh]

This occurs in IE6 and below and is fixed in IE7. For IE6-, either hide the list box when you mouse over the menu (a bit of a fix), or use iframe shimming (place an iframe underneath the menu).

Hi,
Thanks for giving this suggestion ..
i tried iframe for list box still the problem appears ....and also i used id for list box to hide but other list items are affecting ..
so what to do .....

[acoder]

It's not that simple. Search for "iframe shim" and you should find some useful links.