Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Multicolumn Dropdown Menu - Error in IE

Newbie
  
Join Date: Mar 2008
Posts: 7
#1: Aug 18 '08
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.
Expand|Select|Wrap|Line Numbers
  1.  
  2. Here the Code : For CSS
  3.  
  4. <style type="text/css">
  5. /* Root = Horizontal, Secondary = Vertical */
  6. ul#navmenu-h {
  7.   margin: 0;
  8.   border: 0 none;
  9.   padding: 0;
  10.   width: 600px; /*For KHTML*/
  11.   list-style: none;
  12. }
  13.  
  14. ul#navmenu-h li {
  15.     margin: 0;
  16.     border: 0 none;
  17.     padding: 0;
  18.     float: left; /*For Gecko*/
  19.     display: inline;
  20.     list-style: none;
  21.     position: relative;
  22.     width: 185px;  
  23.  
  24. }
  25.  
  26.  
  27. ul#navmenu-h ul {
  28.   margin: 0;
  29.   border: 0 none;
  30.   padding: 0;
  31.   width: 600px;
  32.   list-style: none;
  33.   display: none;
  34.   position: absolute;
  35.   top: 24px;
  36.   left: 0;
  37.  
  38. }
  39.  
  40. ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  41.   clear: both;
  42.   display: block;
  43.   font: 1px/0px serif;
  44.   content: ".";
  45.   height: 0;
  46.   visibility: hidden;
  47. }
  48.  
  49. ul#navmenu-h ul li {
  50.   width: 300px;
  51.  
  52.   float: left; /*For IE 7 lack of compliance*/
  53.   display: block !important;
  54.   display: inline; /*For IE*/
  55. }
  56.  
  57. /* Root Menu */
  58. ul#navmenu-h a {
  59.   border: 1px solid #FFF;
  60.   border-right-color: #D6C7A7;
  61.   border-bottom-color: #D6C7A7;
  62.   text-align:left;
  63.   padding: 0 6px;
  64.   float: none !important; /*For Opera*/
  65.   float: left; /*For IE*/
  66.   display: block;
  67.   background: #F1ECE1;
  68.   color: #666;
  69.   font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  70.   text-decoration: none;
  71.   height: auto !important;
  72.   height: 1%; /*For IE*/
  73. }
  74.  
  75. /* Root Menu Hover Persistence */
  76. ul#navmenu-h a:hover,
  77. ul#navmenu-h li:hover a,
  78. ul#navmenu-h li.iehover a {
  79.   background: #D6C7A7;
  80.   color: #FFF;
  81.     text-align:left;
  82.  
  83. }
  84.  
  85. /* 2nd Menu */
  86. ul#navmenu-h li:hover li a,
  87. ul#navmenu-h li.iehover li a {
  88.   float: none;
  89.   background: #F1ECE1;
  90.   color: #666;
  91.  
  92.  
  93.  
  94. }
  95.  
  96. /* 2nd Menu Hover Persistence */
  97. ul#navmenu-h li:hover li a:hover,
  98. ul#navmenu-h li:hover li:hover a,
  99. ul#navmenu-h li.iehover li a:hover,
  100. ul#navmenu-h li.iehover li.iehover a {
  101.   background: #D6C7A7;
  102.   color: #FFF;
  103. }
  104.  
  105. /* 3rd Menu */
  106. ul#navmenu-h li:hover li:hover li a,
  107. ul#navmenu-h li.iehover li.iehover li a {
  108.   background: #F1ECE1;
  109.   color: #666;
  110. }
  111.  
  112. /* 3rd Menu Hover Persistence */
  113. ul#navmenu-h li:hover li:hover li a:hover,
  114. ul#navmenu-h li:hover li:hover li:hover a,
  115. ul#navmenu-h li.iehover li.iehover li a:hover,
  116. ul#navmenu-h li.iehover li.iehover li.iehover a {
  117.   background: #D6C7A7;
  118.   color: #FFF;
  119. }
  120.  
  121. /* 4th Menu */
  122. ul#navmenu-h li:hover li:hover li:hover li a,
  123. ul#navmenu-h li.iehover li.iehover li.iehover li a {
  124.   background: #F1ECE1;
  125.   color: #666;
  126. }
  127.  
  128. /* 4th Menu Hover */
  129. ul#navmenu-h li:hover li:hover li:hover li a:hover,
  130. ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  131.   background: #D6C7A7;
  132.   color: #FFF;
  133. }
  134.  
  135. ul#navmenu-h ul ul,
  136. ul#navmenu-h ul ul ul {
  137.   display: none;
  138.   position: absolute;
  139.   top: 0;
  140.   left: 160px;
  141. }
  142.  
  143. /* Do Not Move - Must Come Before display:block for Gecko */
  144. ul#navmenu-h li:hover ul ul,
  145. ul#navmenu-h li:hover ul ul ul,
  146. ul#navmenu-h li.iehover ul ul,
  147. ul#navmenu-h li.iehover ul ul ul {
  148.   display: none;
  149. }
  150.  
  151. ul#navmenu-h li:hover ul,
  152. ul#navmenu-h ul li:hover ul,
  153. ul#navmenu-h ul ul li:hover ul,
  154. ul#navmenu-h li.iehover ul,
  155. ul#navmenu-h ul li.iehover ul,
  156. ul#navmenu-h ul ul li.iehover ul {
  157.   display: block;
  158. }
  159.  
  160. </style>
  161.  
  162. <script type="text/javascript">
  163. navHover = function() {
  164.     var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
  165.     for (var i=0; i<lis.length; i++) {
  166.         lis[i].onmouseover=function() {
  167.             this.className+=" iehover";
  168.         }
  169.         lis[i].onmouseout=function() {
  170.             this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  171.         }
  172.     }
  173. }
  174. if (window.attachEvent) window.attachEvent("onload", navHover);</script>
  175.  
  176.  
  177.  
  178.   <table width="100%" border="0" cellspacing="0" cellpadding="0">
  179.     <tr>
  180.       <td align="center" valign="top"> <ul id="navmenu-h">
  181.  
  182.     <li><a href="#"> Top Songs &raquo;</a>
  183.         <ul> <li><a href="#">Song 1</a></li>
  184.           <li><a href="#"> Song 1</a></li>
  185.            <li><a href="#">Song 1</a></li>
  186.             <li><a href="#">Song 1</a></li>
  187.              <li><a href="#">Song 1</a></li>
  188.               <li><a href="#">Song 1</a></li>
  189.                <li><a href="#">Song 1</a></li>
  190.               <li><a href="#">Song 1</a></li>
  191.                  <li><a href="#">Song 1</a></li>
  192.                   <li><a href="#"> Song 1</a></li>
  193.                    <li><a href="#">Song 1</a></li>
  194.                     <li><a href="#">Song 1</a></li>
  195.                      <li><a href="#">Song 1</a></li>
  196.                       <li><a href="#">Song 1</a></li>
  197.                        <li><a href="#">Song 1</a></li>
  198.                         <li><a href="#">Song 1</a></li>                      
  199.                <li><a href="#">Top  REVIEW sites  &raquo;</a>
  200.               <ul>
  201.                 <li><a href="#"> REVIEW sites 1</a></li>
  202.                 <li><a href="#"> REVIEW sites 2</a></li>
  203.                 <li><a href="#"> REVIEW sites 3</a></li>
  204.                 <li><a href="#"> REVIEW sites 4</a></li>         
  205.               </ul>
  206.           </li>
  207.  
  208.  
  209.         </ul>
  210.     </li>
  211.  
  212.   </ul></td>
  213.     </tr>
  214.     <tr>
  215.       <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  216.         <tr>
  217.           <td width="20%" align="left" valign="top">&nbsp;</td>
  218.           <td width="80%" align="left" valign="top"><form name="form1" method="post" action="">
  219.  
  220.             <select name="select">
  221.               <option>Top A - Z Songs</option>
  222.             </select>
  223.  
  224.                     </form>
  225.           </td>
  226.         </tr>
  227.       </table></td>
  228.     </tr>
  229.     <tr>
  230.       <td align="center" valign="top">&nbsp;</td>
  231.     </tr>
  232.   </table>
  233.  

acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Aug 18 '08

re: Multicolumn Dropdown Menu - Error in IE

Quote:

Originally Posted by tceramesh

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).
Newbie
  
Join Date: Mar 2008
Posts: 7
#3: Aug 18 '08

re: Multicolumn Dropdown Menu - Error in IE

Quote:

Originally Posted by acoder

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's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Aug 18 '08

re: Multicolumn Dropdown Menu - Error in IE

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

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved