Hello all,
Why isn’t the drop down menu’s main menu list items maintaining the hover effect when you browse its child div? I’m talking about the #pMenu a:hover, #pMenu a:focus, #pMenu a:active, and #bMenu a:hover, #bMenu a:focus, #bMenu a:active. I want it to maintain the hover effect!
The main reason why is because your anchor link is more then likely a child of the menu item like your sub menu, the easiest way without adding extra markup or using JavaScript is to use something like the below.
#pMenu a:hover,
#pMenu li:hover a {
// CSS properties ...
}
Yes, it keeps the hover effect, but the drop down menu now randomly disappears.
Can we see an example of the menu?
SgtLegends code wouldn’t have made the menu randomly disappear. It’s more likely that you have some gaps where the hover is being lost of you have the submenu too far away from the trigger element. The elements must always be touching or you can’t move from one to the next without losing the hover effect.
I have uploaded the files to Atlanta Review Group- Product Articles. They demonstrate what’s going on in the top menu. I’m gonna post my code in here, too.
HTML:
<!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
<div id="health">
<h2>weight loss</h2>
<h3>fitness</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h3>dieting</h3>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>skin care</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
<div id="insurance">
<h2>home insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>auto insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>health insurance</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>annuities</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>
<div id="general">
<h2>electronics</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>style & fashion</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>food/dining</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
<h2>cars/auto</h2>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
<div id="dating">
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>
<div id="education">
<ul>
<li><a href="#">under construction</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/legal.html">legal</a>
<div id="pLegal">
<h2>DUI</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
</ul>
CSS:
/*******************/
/*PERSONAL NAV MENU*/
/*******************/
#pMenu{
padding-top:72px;
padding-left:45px;
padding-bottom:15px;
background:url(pMenuBG.gif) no-repeat scroll 50% 15px transparent;
height:90px;
}
#pMenu a{text-decoration:none;}
#pMenu li{
list-style:none;
float:left;
margin-right:10px;
position:relative;
}
#pMenu li li{
width:100%;
padding-top:2px;
padding-bottom:5px;
text-align:left;
}
#pMenu li a{
color: #FFF;
text-shadow:1px 1px 1px #000;
width:auto;
padding:3px;
border:5px groove #0F0;
font-size:16px;
/*begin main gradient*/
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
/*end main gradient*/
}
#pMenu a:hover, #pMenu li:hover a, #pMenu a:focus, #pMenu li:focus a, #pMenu a:active, #pMenu li:active a{
color:#FF0;
/*begin hover gradient top level*/
background: #a0030b; /* Old browsers */
background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
}
#pMenu div{
left:-999em;
position:absolute;
margin-top:8px;
width:150px;
border:2px solid #003;
/*second gradient*/
background: rgb(96,108,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}
#pMenu li:hover div, #pMenu a:focus+div{left:0;}
#insurance{margin-left:-10px;}
#general{margin-left:-30px;}
#dating{margin-left:-46px;}
#education{margin-left:-53px;}
#pLegal{margin-left:-70px;}
#pMenu div a{
text-decoration:none;
color:#0C0;
text-shadow:2px 2px 2px #000;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}
#pMenu div a:hover, #pMenu div li:hover a, #pMenu div a:focus, #pMenu div li:focus a, #pMenu div a:active, #pMenu div li:active a{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:underline;
}
#pMenu h2{
font-style:bold;
text-align:left;
font-size:14px;
text-shadow:1px 1px 1px #000;
padding-left:3px;
padding-top:5px;
}
#pMenu h3{
text-align:left;
text-shadow: 1px 1px 1px #000;
color:#999;
font-style:italic;
font-size:13px;
padding-top:2px;
padding-left:25px;
}
/******************/
/*End Personal Nav*/
/******************/
You need position:relative and a high z-index on the parent.
e.g.
#pMenu {
position:relative;
z-index:999;
}
Yes, that worked! Now, how do I target the submenu links that have that gradient over it. It’s taking on the hover gradient from the main list items.
You need to reset the nested items back to their default.
If you are saying:
#pMenu li:hover a {styles}
Then that applies to all anchors in all nested lists also therefore you have to counteract that rule with a more specific one.
#pMenu li:hover a {styles}
#pMenu li:hover li a {reset styles to what they need to be}
So will I become more efficient to answer such questions for myself, can you recommend me a CSS book by Sitepoint?
by the way, all of your posts are AwEsOmE
You’ll get there eventually 
Just practice and patience 
As to which books to buy then usually its best to have a few as they all differ in their approaches. “Build your own website the right way using html and css” by Ian Lloyd is pretty good or most anything by Eric Meyer (“The definitive guide” especially but is hard going at times).
However, your issue at present seems to be in the deeper understanding of how things work so perhaps you should browse through the online reference and see how things are supposed to work. There are also [URL=“http://reference.sitepoint.com/css/demos”]live examples where you can try out and practice.