Problem with CSS Menu

lbh2011 · 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>

Sign In

Problem with CSS Menu

Recommended Posts

lbh2011

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information