HI folks,
I'm working on a third level menu and I need a CSS fix for this, and I'm not sure I understand why it is dropping down instead of flying out...
To see the menu in action, go here : http://bendannie2.businesscatalyst.com/Sale and hover over the On Sales menu. The third level menu is dropping down and when I try to move it right with a left margin, the container box remains in place and only the text li moves right...
And it really shouldn't display until I'm hovering over the Cartier Jewelry link...
TIA,
Jeff
The code so far is:
nav ul ul {
background: #FFFFFF/*url(images/nav-current.png) repeat-x scroll center top*/;
opacity:0.8;
filter:alpha(opacity=90); /* For IE8 and earlier */
-moz-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
-webkit-box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
box-shadow: 0px 3px 5px 0px rgba(68,68,68,0.7);
left: -999em;
list-style: none outside none;
margin: 0;
padding: 4px 0 0;
position: absolute;
top: 89px;
width: 12em;
}
nav li:hover ul,
nav li.sfhover ul{
left: auto;
}
nav ul ul ul li{
background: none;
border-bottom: 1px solid #6699FF;
list-style: none;
margin: 0 0 0 0px;
padding: 0;
}
nav ul ul li{
background: none;
border-bottom: 1px solid #6699FF;
list-style: none;
margin: 0 0 0 -20px;
padding: 0;
}
nav ul ul li a:link,
nav ul ul li a:visited{
color: #3399FF;
display: block;
font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif, "Bitstream Vera Sans";
font-size: 12px;
padding: 8px 5px;
text-decoration: none;
}
nav ul ul li a:active,
nav ul ul li a:hover{
background: #e4e4e4;
color: #3366FF;
padding: 8px 5px;
}
