...

View Full Version : drop down hover brings up all ul not one wanted



tartman
11-19-2011, 12:49 PM
I have a three tier drop down menu. When I hover over the first tier it brings up all the other tiers not just #2. It shows #3 as well. Can you make a suggestion?

Need any help you can offer...tearing hair.
Thanks,
T.

site: http://http://www.jewelerjoni.com/new_jeweler.htm

Here's the css:

/*******start new jeweler list**************/


.right_list { float:left;
width: 180px;
overflow: hidden;
padding-left: 10px;
margin-left: 10px;
}

#cat_1347111_divs, #nav_1347111 ul, #cat_1348105_divs, #nav_1348105 ul, #cat_1349473_divs, #nav_1349473 ul { padding:0;
margin: 0;
list-style: none;
float: left;

}

#nav_1348105 a, #nav_1349473 a, #nav_1347111 a { display: block;
width: 400px;
padding:10px;
color:white;
height: 25px;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #000;
border-top: 1px solid #fff;
background: #7681c0;

}


/*******1 level control************/

#nav_1348105 li a:hover, #nav_1349473 li a:hover, #nav_1347111 li a:hover { text-decoration: none;
background: #626b9f;
}

#nav_1348105 li, #nav_1349473 li, #nav_1347111 li { float: left;
margin-left: -10px;
}
/********2 level control*********/

#nav_1349473 li ul, #nav_1348105 li ul, #nav_1347111 li ul { position: absolute;
width: 150px;
left: -999em;
z-index: 500;
margin-left: 200px;
margin-top: -47px;
font-size: 0.8em;

}



#nav_1349473 li:hover ul , #nav_1348105 li:hover ul, #nav_1347111 li:hover ul{ left: auto;

}

#nav_1349473 li ul a, #nav_1348105 li ul a, #nav_1347111 li ul a { display: block;
color: white;
line-height: normal;
font-size: 1em;
text-transform: none;
font-family: Helvetica, Arial, sans-serif;
}

/***gray below****/

#nav_1349473 li ul li a, #nav_1348105 li ul li a, #nav_1347111 li ul li a { width: 150px;
border-bottom: 1px solid black;
border-top: 1px solid gray;
border-left: 1px solid black;
height: 10px;
background: #363636;


}
/****purple below****/
#nav_1349473 li ul li a:hover, #nav_1348105 li ul li a:hover, #nav_1347111 li ul li a:hover { color: #fff;
background: #955e96;
}

/*********third level control*********/

#nav_1349473 li ul li ul {position: absolute;
width: 150px;
left: -999em;
}


#nav_1349473 li ul li:hover ul { left: auto;
background:blue;
}

#nav_1349473 li ul li ul a {
width: 150px;
height: 10px;
display:block;
float: left;
margin-left: -19px;
margin-top: -10px;
font-size: 0.8em;
border-bottom: 1px solid black;
border-top: 1px solid gray;
border-left: 1px solid black;

}


/*******end new jeweler list**************/

SB65
11-20-2011, 01:58 PM
Have a try replacing:


#nav_1349473 li:hover ul , #nav_1348105 li:hover ul, #nav_1347111 li:hover ul{ left: auto;

}

with


#nav_1349473 li:hover > ul , #nav_1348105 li:hover > ul, #nav_1347111 li:hover > ul{ left: auto;

}

As you have it, all uls within the hovered li will be set to left:auto - which affects the third as well as the second level. Adding the > selector means that only direct child elements will be displayed - which will exclude the third level. This is not supported in IE6, however, if you're coding for that browser.

tartman
11-20-2011, 09:26 PM
Wow, Thanks for your solution! Never heard of using > that way.
T.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum