| IE dropdown menu issues
Menu closes too soon when going to submenu ul options |
feliciano
msg:4436944 | 4:28 am on Apr 4, 2012 (gmt 0) |
Looks like something "magically" closes the dropdown menu on IE (7, 8 and 9), anybody knows how to fix it?
Thanks in advance:
HTML:
<div id="menu">
<div class="moduletable_menu">
<ul class="menu">
<li id="current" class="active item1"><a href="#"><span>OPTION 1</span></a></li>
<li class="parent item2"><a href="#"><span>OPTION 2</span></a>
<ul>
<li class="item30"><a href="#"><span>Submenu 1a</span></a></li>
<li class="item32"><a href="#"><span>Submenu 2b</span></a></li>
<li class="item33"><a href="#"><span>Submenu 1c</span></a></li>
</ul>
</li>
<li class="item54"><a href="#"><span>OPTION 3</span></a></li>
<li class="parent item3"><a href="#"><span>OPTION 4</span></a>
<ul>
<li class="item37"><a href="#"><span>Submenu 2a</span></a></li>
<li class="item34"><a href="#"><span>Submenu 2b</span></a></li>
<li class="item35"><a href="#"><span>Submenu 2c</span></a></li>
<li class="item36"><a href="#"><span>Submenu 2d</span></a></li>
</ul>
</li>
<li class="item4"><a href="#"><span>OPTION 4</span></a></li>
<li class="parent item5"><a href="#"><span>OPTION 5</span></a>
<ul>
<li class="item38"><a href="#"><span>Submenu 3a</span></a></li>
<li class="item39"><a href="#"><span>Submenu 3b</span></a></li>
</ul>
</li>
<li class="item6"><a href="#"><span>OPTION 5</span></a></li>
<li class="item7"><a href="#"><span>OPTION 6</span></a></li></ul>
</div>
CSS:
#menu ul {
padding: 0px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 50px;
}
#menu a {
display: block;
background-image: url(../imag/menu-sup-fondo-dcha.jpg);
background-position: right top;
background-repeat: no-repeat;
color: #FFFFFF;
text-decoration: none;
padding-top: 14px;
padding-right: 10px;
padding-bottom: 14px;
padding-left: 10px;
}
#menu ul li {
float: left;
background-image: url(../imag/menu-sup-fondo-izda.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-right: 1px;
margin-left: 1px;
}
#menu ul li ul {
width: 170px;
margin: 0px!important;
padding: 0px!important;
position: absolute;
z-index: 1;
display: none;
}
#menu ul li ul li {
float: none;
font-size: 0.8em;
background-image: none;
background-color: #000000;
}
#menu ul li ul li a {
background-image: none;
padding: 10px;
}
#menu ul li:hover ul{
position: absolute;
display: block!important;
}
#menu ul li ul li:hover {
background-color: #4D3B14;
}
#menu {
width: 990px;
float: left;
}
#logo {
float: left;
}
|
birdbrain
msg:4437008 | 10:13 am on Apr 4, 2012 (gmt 0) |
Hi there feliciano,
and a warm welcome to these forums. ;)
The code worked perfectly in my IE8 and IE9 browsers. ;)
As for IE7, I do not have the facilities to test in that browser, or the inclination. :)
birdbrain
|
feliciano
msg:4437031 | 12:17 pm on Apr 4, 2012 (gmt 0) |
Thanks for your reply...
I think the problem is in the page structure, more than in the css :(
will check it
|
feliciano
msg:4437346 | 6:25 am on Apr 5, 2012 (gmt 0) |
Hi, thatīs weird... but, i solved this just putting a background color for the disapearing ul; #menu li ul
Solved!
|
|
|
