CSS Horizontal Menu (3)

Again this menu uses a background 1px image with a slight gradient for affect. Whats slightly different this time is I have an extra image the floats under each menu item depending on the page you are on. This is just a small triangular image. Both images are attached below the code.

In the body tag of each page you have to include which page you are on. For example, on the hompeage it would be body class="Home", on the contact page body class="contact" and so on..

CSS
#menubar {width:750px;margin: auto;background:url(../images/menu_shade.jpg) repeat-x left top;}
ul#menu { color:fff; font-size:14px;margin: auto; overflow:hidden; list-style:none; font-family:Helvetica, Arial, sans-serif;}
ul#menu li { float:left;margin:0 4px; height:29px; padding:6px 5px 5px 5px; }

ul#menu li a:link,
ul#menu li a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
ul#menu li a:hover,
ul#menu li a:focus { text-decoration:none; color:#363636;}

body.Home ul#menu li.Home,
body.About ul#menu li.About,
body.Qualifications ul#menu li.Qualifications,
body.Testimonials ul#menu li.Testimonials,
body.Contact ul#menu li.Contact { background:url(../images/nav_cur_bg_red.jpg) no-repeat center bottom; }

body.Home ul#menu li.Home a,
body.About ul#menu li.About a,
body.Qualifications ul#menu li.Qualifications a,
body.Testimonials ul#menu li.Testimonials a,
body.Contact ul#menu li.Contact a { color:#fff; }

HTML:
<div id="menubar">
<ul id="menu">
<li class="Home"><a href="index.html">Home</a></li>
<li class="About"><a href="about.html">About Us</a></li>
<li class="Qualifications"><a href="qualifications.html">Qualifications</a></li>
<li class="Testimonials"><a href="testimonials.html">Testimonials</a></li>
<li class="Contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>