I'm currently working on a C# project to develop a smartphone-friendly website for motorists to easily pay their parking fees. However, I'm facing some challenges with the menu design. My goal is to have a white menu with black text, where the current page should be highlighted in blue with white text. Unfortunately, when I attempt to implement this using CSS, the result is not as expected - the selected page appears with white background and black text, with a hint of blue behind it. Can anyone provide guidance on how to resolve this issue?
The menu items are placed within 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 assign the "current page" class using JavaScript on each individual page:
<script type="text/javascript">
$(document).ready(function () {
$("#saldomenu").addClass("currentpage");
});
</script>
Finally, I define the CSS styles in a separate file linked to 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've been struggling to find the right solution for this issue for about two weeks now. Any assistance or insight would be greatly appreciated.