So I can't find a way to highlight the current tab in the navigation menu I'm on. Any tips?



Code:
<!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css"> </head> <body> <div class="bg"> <header> <div class="main wrap"> <h1><a href="index.html"><img src="images/logo.png" alt=""></a></h1> </div> <nav> <ul class="menu"> <li id ="indexid"><a href="Index.html">Home</a></li> <li id ="id"><a href="evenementen.html">Evenementen</a></li> <li id ="bestuurid"><a href="bestuur.html">Bestuur</a></li> <li id ="fotosid"><a href="fotos.html">Foto's</a></li> </ul> <div class="clear"></div> </nav> </header> <!--==============================content================================--> <body> </body> </html>

Below you can find the CSS I've got right now.
Code:
/* Global properties ======================================================== */ html {height:100%;} html, body {width:100%; padding:0; margin:0;} body { color:#fff; min-width:998px; height:100%; } .ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0} .bg {background: url(../images/bg.jpg) center 0 repeat-y; width:100%; min-height:100%;} .main {width:960px; margin:0 auto;} /***********************************************************************/ a {text-decoration:none; cursor:pointer;text-decoration:none; } a:hover {text-decoration:none;} /******************************************************************/ .clear {clear:both; line-height:0; font-size:0; width:100%;} .wrapper {width:100%; overflow:hidden; position:relative} .wrap {overflow:hidden; position:relative} /*********************************header*************************************/ header{width:100%; background:#333333;} h1 {display:inline-block; z-index:111; float:left; padding:27px 0 0 21px;} nav {display:block; z-index:1111; position:relative; background:url(../images/header.jpg) 0 bottom repeat-x; } ul.menu {display:block; width:960px; margin:0 auto;} ul.menu li {float:left; display:block; height:60px; text-align:center;} ul.menu li a { font:16px/20px Tahoma, Geneva, sans-serif; color:#000; display:block; padding:19px 22px 21px 22px; overflow:hidden; } ul.menu li:hover, ul.menu li.current {color:#f35} ul.menu li a:hover , ul.menu li.current a {color:#fff} #nav-menu :link, #nav-menu:visited {background:#f00; color:#fff} #nav-menu :hover, #nav-menu:active {background:#f90;}