lbh2011 Posted July 2, 2012 Share Posted July 2, 2012 Hey, Does anyone have any solutions to the following problem? The following code is the CSS menu I'm currently working on. The default state of the menu is black text on a white background. When hovering over a link, the background becomes black and the text white. *The problem* Now, I want to highlight the menu link of the current page using the rule .currentpage This *should* change the background to black and the text to white However when I do this, the text appears black (on a black background) My current thinking is that the rule #navigation li a:visited is taking priority over the .currentpage rule If I remove #navigation li a:visited then the menu works correctly - with the exception of the visited links, which appear in the browser's default colours, instead of black. How do I resolve this issue? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .currentpage { text-decoration: none; font-weight: normal; background-color: #000000; color: #FFF; } #navigation-primary { background-color: #FFFFFF; float: left; width: 100%; height: 26px; margin: 0px; } #navigation { width: 100%; float: left; margin: 0; padding: 0; list-style: none; border-top-width: 0px; border-bottom-width: 0px; border-top-style: none; border-bottom-style: none; border-style:none; height: 25px; } #navigation li { float: left; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; text-decoration: none; background-color: #FFF; color: #000000; } #navigation li a:link { display: block; text-decoration: none; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; color: #000000; background-color: #FFF; } #navigation li a:visited { text-decoration: none; font-weight: normal; color: #000; } #navigation li a:hover { text-decoration: none; background-color: #000000; color: #FFF; } #navigation li a:active{ text-decoration: none; font-weight: normal; color: #000000; background-color: #FFF; } </style> </head> <body> <div id="navigation-primary"> <ul id="navigation"> <li><a href="index.php" class="currentpage">Home</a></li> <li><a href="index2.php">Page 2</a></li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.