Home › Forums › CSS › Background Hover with Fly out › Re: Background Hover with Fly out
May 19, 2012 at 11:42 pm
#103121
JPC776Participant
Or you could remove “overflow:hidden” from the #wrap and try something like this…
nav, .sidebar{
margin:4px 8px 8px;}
nav{
background: #12c4a9 url(images/nav-bg.png) no-repeat left bottom;
width:223px;
height:369px;
}
nav ul, nav ul li{
margin:0;
padding:0;
list-style:none;
}
nav ul li{
font-family: 'Rock Salt', cursive;
width:223px;
}
nav ul li a{
font-size:18px;
color:#ffffff;
display:block;
text-decoration:none;
padding:0px 15px;
}
nav ul li a:hover {
position:relative;
left:33px;
}
nav a:hover {
color: #fff;
}
nav ul li:hover{
position:relative;
}
nav ul.menu li:hover{
background: url(images/hover.png) no-repeat left center;
position:relative;
left:-33px;
}
nav ul li ul{
position:absolute;
display:none;
}
nav ul li:hover ul{
background:#754ba9;
left:256px;
top:0px;
display:block;
}
nav ul.sub-menu li:hover{
background:#12c4a9;
position:relative;
left:0px;
}
nav ul li ul li{
font-family:Arial, Helvetica, sans-serif;
background-color:#754ba9;
padding:8px;
}
nav ul li ul li:hover a{
position:relative;
left:0px;
}