homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved