Hey guys,

 

I'm struggling with a CSS drop down menu using DIVs (I know everyone says to use lists but no matter what I did I couldn't get it to work fluidly and in different browsers) - I swear the code was working 20 minutes ago, then I changed a width and now it's not working (even if I move the width value back to what it was).

 

Basically, the issue is this:

 

If I hover over the top level item of the menu, it produces the sub-menu as expected, however once you hover past the first link in the sub-menu, the sub-menu disappears. I have even tried adding "submenu:hover {display:block;}" - so hovering over the sub-menu itself will make it display, but it isn't working. I don't usually post on forums with issues I like to try and figure them out myself or use any available resources, but I think this is a tough one to search for as it's pretty specific.

The issue is only present in IE7; there are no problems in IE5 (although IE5 is running at 800*600 if that makes a difference, IE7 at 1280*720).

 

Here's the code, if anyone could help I'd be very grateful. Taking out the second <br /> tag after each sub-menu does solve the issue. I would remove the <br /> and just insert a great line-height, however that causes issues when viewed in small resolutions. Is there any way to get the hover to continue over the line breaks?

 

CSS:

#menu{
position:absolute;
top:90px;
left:0;
width:100%;
height:25px;
background:url();
padding-left:5%;
padding-right:5%;
z-index:300;
}
#menu a {color:white;}
#menubackground{
position:absolute;
top:90px;
left:0;
width:100%;
height:25px;
background:url(menu.png);
padding-left:5%;
padding-right:5%;
z-index:-299;
}
#menuitem{
width:15%;
height:25px;
float:left;
text-align:center;
font:normal 13px Verdana;
color:white;
z-index:300;
background:url(menu.png);
}

#menuitem:hover #menusublist{
display:block;
}
#menuitem a:hover{
font-weight:bold;
}
#menusublist{
display:none;
position:relative;
top:3px;
background:#3a2076;
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px; 
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
z-index:300;
line-height:12px;
}
#menusublist a:hover{
font-weight:bold;
}
#menusublist:hover #menusublist{
display:block;
}

 

I've also tried that last line as the following but it didn't work, which is why that extra #menusublist is in there.

 

#menusublist:hover {
display:block;
}

HTML:

<div id="menu">
<div id="menuitem"><a href="#">Item 1</a></div>
<div id="menuitem"><a href="#">Item 2</a></div>
<div id="menuitem"><a href="#">Item 3</a></div>
<div id="menuitem"><a href="#">Item 4</a></div>
<div id="menuitem"><a href="#">Item 5</a>
<div id="menusublist">
<a href="#">Item 5: Sub 1</a><br /><br />
<a href="#">Item 5: Sub 2</a></div>
</div>
<div id="menuitem"><a href="#">Item 6</a>
<div id="menusublist">
<a href="#">Item 6: Sub 1</a><br /><br />
<a href="#">Item 6: Sub 2</a><br /><br />
<a href="#">Item 6: Sub 3</a><br /><br />
<a href="#">Item 6: Sub 4</a></div>
</div>
</div>

Edited January 6, 201115 yr by JamieB2

Give this a try

 

#menuitem{ 
width:15%; 
/*height:25px;removed height*/
float:left; 
text-align:center; 
font:normal 13px Verdana; 
color:white; 
z-index:300; 
background:url(menu.png);
padding:5px 0; /*added padding*/
} 

 

I've redone it as a list if its helpful

 

html

 

<ul id="menu"> 
<li class="menuitem"><a href="#">Item 1</a></li><!--any css you use more than once should be a class not id--> 
<li class="menuitem"><a href="#">Item 2</a></li> 
<li class="menuitem"><a href="#">Item 3</a></li> 
<li class="menuitem"><a href="#">Item 4</a></li> 
<li class="menuitem"><a href="#">Item 5</a> 
<ul class="menusublist"> 
<li><a href="#">Item 5: Sub 1</a></li>
<li><a href="#">Item 5: Sub 2</a></li></ul> 
</li> 
<li class="menuitem"><a href="#">Item 6</a> 
<ul class="menusublist"> 
<li><a href="#">Item 6: Sub 1</a></li>
<li><a href="#">Item 6: Sub 2</a></li>
<li><a href="#">Item 6: Sub 3</a></li>
<li><a href="#">Item 6: Sub 4</a></li></ul> 
</li> 
</ul>

 

css I added to your existing

 

body {margin: 0; padding: 0;} 
ul{list-style:none;}
.menusublist li{padding:5px 0;} /*added Padding to subnav*/

 

I forgot to say when use css on more than one element use class="" not id=""

 

HTH

Edited January 6, 201115 yr by mteam

Dropping the height and adding padding worked! Many thanks for that.

 

Also thanks for taking the time to do the list, I tried it but it didn't function (no dropdown) - maybe with a little tweaking I could get it going.

 

 

One issue that this has now raised though;

 

In Google Chrome 8 - Item 5 sub menu receives bottom border radius properties, Item 6 sub menu does not

 

In Google Chrome 5 - Neither of these receive the border radius properties.

 

Any clues as to what may be causing that?

 

 

EDIT: Oh yeah I didn't think about that. I'll switch them all over to classes now.

Edited January 6, 201115 yr by JamieB2

If you used my code before I edited my post give it another go as I must have been 1/2 asleep I had li open tags and div closing tags lol

Haha yeah I noticed that and corrected it, the positioning and sizes all move as a list and it's taken me forever to get it to fit different resolutions when placed on the site so I don't really want to have to do it all again.

 

Any clue for the border radius?

I''ve done a quick test here seems to work ok in chrome

 

Is your site live have you got a link