PDA

View Full Version : CSS Drop-Down Menu issue



BenDesign
02-13-2007, 07:06 PM
I've got a CSS Drop-Down menu that seems to be a bit "jumpy". It's sometimes hard to click on one of the drop-down items. Kinda hard to explain, but I know it's not working as well as ones I've done before. Anyone have any thoughts as to why?

Here's the URL: http://benworsleydesign.net/

Also, for reference's sake, here's one I did before that works well: http://globalsistergoods.com/

THANK YOU!!!!!!!

enfleshjsc
02-13-2007, 09:57 PM
Can you post the menu code?

BenDesign
02-13-2007, 10:35 PM
#nav {
list-style:none;
float:right;
margin-bottom:0;
padding-top:60px;
position:relative;
z-index: 100;
}
#nav ul {
list-style:none;
z-index:99;
position:absolute;
overflow:visible;
left:20px;
display:none;
width:119px;
margin:0;
padding:0;
}

#nav li {
position:relative;
float:left;
width:130px;
display:block;
height:auto;
text-align:center;
margin:0;
}
#nav ul li {
background-color:#424242;
color:#333;
font-variant:normal;
height:auto;
width:auto;
}
#nav a {
text-decoration:none;
display:block;
width:119px;
height:11px;
color:#333;
font-family:Arial, Helvetica, sans-serif;
font-size:7.5pt;
font-weight:700;
clear:none;
margin:0 0 0.2em 0.1em;
padding:0.1em 0.1em 0.4em 0.5em;
}

#nav a:hover,#nav li:hover {
text-align:center;
clear:none;
color:#e93419;
}
#nav ul li:hover,#nav ul li a:hover {
background-color:#666;
clear:none;
text-align:left;
color:#FFF;
}
#nav ul ul,#nav ul ul ul {
display:none;
position:absolute;
margin-top:-10px;
margin-left:100px;
color:#FFF;
clear:none;
}

#nav ul li>ul,#nav ul ul li>ul {
margin-top:-10px;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul,#nav li:hover ul ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav ul li:hover ul,#nav ul ul li:hover ul,#nav ul ul ul li:hover ul,#nav ul ul ul ul li:hover ul {
display:block;
clear:none;
margin-left:-15px;
margin-top:4px;
}

li>ul {
top:auto;
left:auto;
}

#nav ul li a {
color:#FFF;
text-align:left;
height:auto;
}
#nav ul ul li,#nav ul ul li:last-child {
border-width:1px;
}

jlhaslip
02-14-2007, 01:52 AM
#nav li:hover ul,#nav ul li:hover ul,#nav ul ul li:hover ul,#nav ul ul ul li:hover ul,#nav ul ul ul ul li:hover ul {
display:block;
clear:none;
margin-left:-15px;
margin-top:4px;
}

Try removing this 4 px margin-top. It might be affecting the mouse_out from the parent to the child. It doesn't appear in your previous menu that works well. Perhaps it creates a short gap between the top and second layer of the on:hover???

Short of that, perhaps looking at this other posting (http://codingforums.com/showthread.php?t=107375) would assist you.

BenDesign
02-16-2007, 08:42 PM
Nice. That was totally the problem. Thanks, jlhaslip!!!