Hi, I am trying to give an active state to my links and I almost got it
but the cant seem to get the same size as my hover state for the background
color I know it has to do with the padding. Website
#menu li.active a{
color:#da272f;
background-color:#fff;
}
The easiest would be to move the <li> padding to the anchors 
.
Im trying to use it but doesnt seem to read it:
#menu_links a:active {
color:yellow;
}
That is the correct behavior. The “active” state is only while the mouse button is down, but old IE was confusing as it used “active” as any good browsers used “focus” and kept the state after mouse-up. Sorry but w3scools isn’t allways a reliable source.
What I think is the easy fix to your original post: Try move the active class’ white background from the anchor to the list item, then the whole item will get the white active color.
I fixed it and it works thanks!
or the element has the focus and the enter key is pressed.
So what CSS and HTML are giving that result?
Website I want the previous state to go away when I click on another page…
<ul id="menu">
<li class="menu_links active"><a href="/index.html">Home</a></li>
<li class="menu_links">About Us</li>
<li class="menu_links active">Products
<ul id="products-drop">
<li><a href="#">Shock Indicator Labels</a></li>
<li><a href="#">Tilt Indicator Label</a></li>
<li><a href="#">Protect-A-Pak</a></li>
<li><a href="#">Omni-G</a></li>
<li><a href="#">Shock Fuse</a></li>
<li><a href="#">Transmonitor</a></li>
<li><a href="#">Transmonitor TD</a></li>
<li><a href="#">Impact-O-Graph</a></li>
<li><a href="#">Digi-Shock</a></li>
</ul>
</li>
<li class="menu_links">Contact Us</li>
<li class="menu_links">Sitemap</li>
<li class="menu_links">Distributors</li>
<li class="menu_links">Downloads</li>
<li class="menu_links">News</li>
<li class="menu_links">Reviews</li>
</ul>
This is the CSS
#menu li.active a {
color: #da272f;
background-color:#fff;
}
#menu li.active {
color: #da272f;
background-color:#fff;
}
Both of these have class=“active” - simply remove the class from the one you don’t want highlighted.
I’d also suggest that you use a different classname in place of active as it can be hard to tell the difference between a.cactive and a:active which have completely different meanings.
As @felgall said, have the “active” class on only the menu item that links to the current page
That means you have to edit the menu on every main page you link to in the menu.
Another method is to have different active class names for each main menu link. Then you can have all classes put into every page’s menu. In the body tag on the corresponding pages you put a class that tells what menu item should get the current page highlighting, preferrably the same class name.
The current page’s highlighting then is changed according to the class name(s) in the body tag. Submenu pages’ body tag can have a sub page class added, same as in the submenu item.
Body tags:
<body class="home"> <!-- marker on the Home page -->
<body class="about"> <!-- marker on the About us page -->
<body class="products"> <!-- marker on all of Products item's linked pages -->
<body class="products shock"> <!-- marker on the Shock Indicator Labels' page -->
Menu html:
<ul id="menu">
<li class="menu_links home"><a href="/index.html">Home</a></li>
<li class="menu_links about">About Us</li>
<li class="menu_links products">Products <!-- its active page class -->
<ul id="products-drop">
<li class="shock"><a href="#">Shock Indicator Labels</a></li>
<li class="tilt"><a href="#">Tilt Indicator Label</a></li>
<li><a href="#">Protect-A-Pak</a></li>
<li><a href="#">Omni-G</a></li>
<li><a href="#">Shock Fuse</a></li>
<li><a href="#">Transmonitor</a></li>
<li><a href="#">Transmonitor TD</a></li>
<li><a href="#">Impact-O-Graph</a></li>
<li><a href="#">Digi-Shock</a></li>
</ul>
</li>
<li class="menu_links">Contact Us</li>
<li class="menu_links">Sitemap</li>
<li class="menu_links">Distributors</li>
<li class="menu_links">Downloads</li>
<li class="menu_links">News</li>
<li class="menu_links">Reviews</li>
</ul>
Highlighting css:
.home #menu .home { background-color:#fff;}
.about #menu .about { background-color:#fff;}
.products #menu .products { background-color:#fff;}
.shock #menu .shock { background-color:#fff;}
Fully automatic highlighting:
With knowledge of what “serverside language” your host server uses, you can have the server automaticly print the class name(s). You put a serverside script in those menu-linked pages’ body tags’ class-attribute that lets the server identify the page by name or path and put appropriate class name(s) in. With knowledge of how the script you wrote constructs the class names you can put those classes in the menu items.
Now every page has the same markup and the same css, giving the current page highlighting to the corresponding menu item on all menu-linked pages.
Automatic highlighting can of course also be achieved with a javascript choosing the appropriate class to put in the body tags on identified pages.
I have an active state font color but it is not showing. WEBSITE
#menu li.active {
color: #da272f;
background-color:#fff;
}
Yes, you are setting the <li>'s font color there, but what about the anchors?
#menu li.active a {
color:#da272f;
}
hmm I see thanks. I wonder why it was not reading it though isnt it the same thing for me to say just the li?
Nope. The anchor font color is the one that has the text inside of it.
The anchor has its own color set. The child would normally inherit the color from the parent, but since the anchor has a defined color, it will use that instead of the parent.
That’s why setting it on the <li> will do nothing.
Now the color of my drop down is gone. It is because they have the same name?
I used this code but does not seem to read it.
#products-drop li a {
color: white;
}
Are you on the products page? How do I get there?
I don’t see that code in your CSS.
THe problem is that your top level .li.active a{} is set to the red color.
Now on hte dropdown, that red color is combined with a red background. You need to reset the inner levels back to white
#menu li.active li a {
color: #FFF;
}
It should be there now.
^^
The active state on my product page goes away
I think these two are conflicting
#products-drop li.active a {
background-color: white;
color:#da272f;
}
#menu li.active li a {
color: #FFF;
}