Background Hover with Fly out

[kblake]

I am trying to troubleshoot a few issues with a vertical menu with a fly out/drop down. The first is I’d like the background on the hover state to only appear in the parent menu items. As of now it appears in the child as well. Second, I’d like the hover background to be positioned about 25px to the left of the menu item so that it overlaps the wrap div. Thirdly, I’d like the fly out (child menu items) to line up on the outside edge of the nav div area.

Here is a link to the test site: http://gracy.espinozawebworks.com/

and here is a link to a screen shot of what I am trying to accomplish: http://gracy.espinozawebworks.com/wp-content/themes/gracy/images/nav-sample.jpg

Thanks in advance for the help.

[JPC776]

I am by no means as experienced as most of the people on this forum, but as far as this goes “Thirdly, I’d like the fly out (child menu items) to line up on the outside edge of the nav div area.” I think you just need to change your positioning in your css

From:

nav ul li:hover ul{
background:#754ba9 url(none);
left:75px;
top:0px;
display:block;
}

To:

nav ul li:hover ul{
background:#754ba9 url(none);
left:223px;
top:0px;
display:block;
}

I think your other issues are also position related.

Hope that helps

Hopefully someone with more experience will confirm and/or help out with this also

[kblake]

Thanks for the help, that worked. I figured out how to make “the background on the hover state to only appear in the parent menu items”. I added the class name to the hover state for each ul like below;

nav ul.menu li:hover{
background: url(images/hover.png) no-repeat left center;
}

nav ul.sub-menu li:hover{
background:#754ba9 url(none);
}

Now all I need is to get the parent hover background image to overlap. Hmm?

[JPC776]

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;

}

[JPC776]

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;

}

[kblake]

Just completed the site and wanted to post that I went with the first option. Both options worked. Thanks for the help.

[Author]

Posts