Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

IE dropdown menu issues

Menu closes too soon when going to submenu ul options

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:


<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>
<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>
<li class="item54"><a href="#"><span>OPTION 3</span></a></li>
<li class="parent item3"><a href="#"><span>OPTION 4</span></a>
<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>
<li class="item4"><a href="#"><span>OPTION 4</span></a></li>
<li class="parent item5"><a href="#"><span>OPTION 5</span></a>
<li class="item38"><a href="#"><span>Submenu 3a</span></a></li>
<li class="item39"><a href="#"><span>Submenu 3b</span></a></li>
<li class="item6"><a href="#"><span>OPTION 5</span></a></li>
<li class="item7"><a href="#"><span>OPTION 6</span></a></li></ul>


#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;
10:13 am on Apr 4, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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. :)

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
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