Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background Hover with Fly out Re: Background Hover with Fly out

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