Question

I’m using C# to create a website for motorists to pay their parking fee with their smartphone. I’m having some issues with my menu however. I want the menu to be white with black text and the current page needs to be blue with white text, but when I try to do so with css I’m getting something completely different: the current page menu item is still white with black text and behind it you see a little bit of blue. Does someone know how I can resolve this one?

My menu items are in the master page:

<div id="menu">
    <ul>
         <li id="accountmenu"><a href="PersoonlijkeGegevens.aspx">Mijn account</a></li>
         <li id="parkeermenu"><a href="Parkeer.aspx">Parkeer</a></li>
         <li id="saldomenu"><a href="SaldoGegevens.aspx">Mijn saldo</a></li>
    </ul>
</div>

I add the current page class with JavaScript in each page:

<script type="text/javascript">
    $(document).ready(function () {
        $("#saldomenu").addClass("currentpage");
    });
</script>

And finally I set the css in a css file of the master page

#menu ul li a:link, a:visited
{    
    background:#fff;
    display:inline-block;
    padding:5px 10px 6px;
    color:#000;
    font-size:16px;
    text-decoration:none;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
    border-bottom:1px solid rgba(0,0,0,0.25);
    position:relative;
    cursor:pointer;
}

.currentpage
{
    background:#172c7d;
    color:#fff;    
}

I really don’t know what I’m doing wrong here and I’ve been searching for 2 weeks now for the correct answer. Can please someone help me out on this one.

Answer 1

You need to make the currentpage class more specific. Your currentpage class was only affecting the li element and not the link.

#menu ul li.currentpage a:link, #menu ul li.currentpage a:visited
{
    background:#172c7d;
    color:#fff;    
}