Welcome to WebmasterWorld Guest from 54.161.147.106

Forum Moderators: not2easy

CSS highlight current page and dropdown menu help

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



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>
5:50 pm on Sep 5, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
5:01 am on Sep 9, 2011 (gmt 0)



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.
5:20 am on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
6:09 am on Sep 9, 2011 (gmt 0)



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
2:18 pm on Sep 9, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month