Home › Forums › CSS › Background Hover with Fly out › Re: Background Hover with Fly out
May 19, 2012 at 11:01 pm
#103120
JPC776
Participant
How about this…Will this work?
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 0px 48px;
}
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;
}
nav ul li ul{
position:absolute;
display:none;
}
nav ul li:hover ul{
left:223px;
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 a:hover a{
position:relative;
left:0px;
}