ul#menu {
width: 100%;
height: 43px;
background: #FFF url(images/CyberYellow/menu-bg.gif) top left repeat-x;
font-size: 0.8em;
font-family: "Lucida Grande", Verdana, sans-serif;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
display: block;
float: left;
margin: 0 0 0 5px;
}
ul#menu li a {
height: 43px;
color: #777;
text-decoration: none;
display: block;
float: left; l
line-height: 200%;
padding: 8px 15px 0;
}
ul#menu li a:hover {
color: #333;
background: #FFF url(images/CyberYellow/current-bg.gif) top left repeat-x;
padding: 5px 15px 0;
}
ul#menu li a:active{
color: #333;
background: #FFF url(images/CyberYellow/current-bg.gif) top left repeat-x;
padding: 5px 15px 0;
}
It shows the yellow block when I hove,but it doesn't show the block for the active link. I want it to show up for the link your on. Kind of like the menu here.
I'm pretty unsure about what you want to do. But I think you're confusing the :active pseud-selector. :active applies to links that you already visited.
^Okay that does answer why it isn't working,but how would I fix this.
Hover style is visible when you put your mouse cursor on it.
Active style is visible when your mouse button is down on it.
Visited style is visible when you release the mouse button.
Hope this help...
^Yes I understand that,but I need it to show when you are in that area. Like the mybb menu here.
They achieve it by changing the class of the < li > tag of the selected item and not the anchor style...
add this:
li .active {
CODE
}
then do this:
<li class="active">Text</li>
All that did was make the background be behind all of them forever.
You need to apply an id/class to each body tag and the list items. Then do something like this is the CSS
.active-page .active-tab {
/*styles go here*/
}
I have the effect on the xkinto tabs if you want to look at the code and see exactly how it's done.
Example:
http://xkinto.com/misc.php?action=help (The help tab looks integrated into the page and has a different style than the other tabs. This is achieved by using the technique described above.)
Ahh thanks computergeek I figured it out.