Log in

View Full Version : Third tier of drop down menu disappears



tartman
11-21-2011, 02:32 PM
I have created a drop down menu using html and css.
The third tier disappears with you hover over the items and scroll them.
Could you make a suggestion of how to fix?
Thanks,
T.
Page url: http://www.jewelerjoni.com/new_jeweler.htm

Css of list:

/*******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_1348105 li:hover ul, #nav_1347111 li:hover ul { left: auto;

}

#nav_1349473 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;
}



#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**************/