CSS highlight current page and dropdown menu help - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS highlight current page and dropdown menu help

jennyX

11:01 am on Sep 5, 2011 (gmt 0)

10+ Year Member

When I set the css to highlight the current menu, it works just fine. But when I have a drop-down menu, the css hightlights the entire drop down menu (meaning every item so the entire menu is that highlighted color.

I only want the menu to be highlighted and not the entire block. Can I ask for your help? Thanks in advance!

//<css>//
bodyhome #home a,
body#bio #bio a,
body#gallery #gallery a,
body#gallery #design a,
body#gallery #music a,
body#contact #contact a,
body#resume #resume a{

background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}

#gallery #menucont ul li a:hover{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0 0 0 0;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top: 50%;*/
/*left:0;*/
}

//<body>//
<body id="home">

//<div>//

<div id="menucont">
<ul>

<li id="home"><a class="active" href="index.php">home</a></li>
<li id="bio"><a href="bio.php">bio</a></li>
<li id="gallery"><a href="gallery.php">gallery</a>
<ul>
<li id="design"><a href="design.php">design</a></li>
<li id="music"><a href="music.php">music</a></li>
</ul>
</li>
<li id="contact"><a href="contact.php">contact</a></li>
<li id="resume"><a href="resume.php">resume</a></li>
</div>

<div id="footercont">
<ul>
<li>Copyright &copy 2011 All Rights Reserved.</li>
</ul>
</div>

Marshall

5:50 pm on Sep 5, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Would it not be simpler to do:

#menucaount ul li a:hover {your color choice}

Or are you not talking about a hover effect but a highlight of the page the visitor is on? I have to admit, I don't understand all the classes you assigned when they all are defined the same.

Marshall

jennyX

5:01 am on Sep 9, 2011 (gmt 0)

10+ Year Member

sorry, i am still beginner at css.

i was wondering if you understand my problem. i hope i made it clear! sorry if i was confusing you.

Marshall

5:20 am on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Are there two separate menus and when the main menu is highlighted showing the current page, the drop down menu also highlights and, I'm assuming then, you don't want it to?

Marshall

jennyX

6:09 am on Sep 9, 2011 (gmt 0)

10+ Year Member

yes that is correct!
for example:

|Gallery|
-art-
-music-

when the gallery is the "current" active page. the whole drop down menu is highlighted.

i only want the "gallery" part highlighted and not "art" or "music" highlighted

Marshall

2:18 pm on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Sorry if I'm being a little slow on this, but as I stare at it, I am getting lost in your CSS.

First, I don't understand all of this

bodyhome #home a,
body#bio #bio a,
body#gallery #gallery a,
body#gallery #design a,
body#gallery #music a,
body#contact #contact a,
body#resume #resume a{

background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}

Seems to be bloated and not make sense. The impression I am getting is that the "gallery" is child to "menucont" so all the above CSS doesn't seem to follow/make sense.

Based on the code you provided, I see it as

#gallery #menucont ul li a {
background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}

and

#gallery #menucont ul li a:hover {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0 0 0 0;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top: 50%;*/
/*left:0;*/
}

And what is the definition of

a class="active"

I you have anything similar to a:active rather than a.active, all the anchors are going to highlight. That being said, then this would be appropriate:

#gallery #menucont ul li a.active {
whatever effects
}

Again, this is all based on the code you provided. Double check all your CSS for bloating and conflict. If you have too many style, it can cause you problems. All try the CSS validator on W3C.

Marshall