I am using a CSS menu in a web page and I want to know how to highlight the selected menu item of the CSS menu. I have pasted the HTML/CSS code below. Can anyone help me by posting the code snippet for highlighting the menu item?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
<meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 1px 1px 0px;
background-color:#A5A5A5;
background-repeat:repeat;
border-color:#A6A6A6;
border-width:0px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:0px;
}
ul.pureCssMenu li{
display:block;
margin:1px 0px 0px 1px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#FFFFFF;
border-width:0px;
border-color:#FCEEB0;
border-style:solid;
text-align:left;
text-decoration:none;
padding:5px;
_padding-left:0;
font:normal 11px Arial;
color: #000000;
text-decoration:none;
cursor:pointer;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3;
height:100%;
display:inline-block;
background-color:#A6A6A6; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FF1C1C;
border-color:#4C99AB;
border-style:solid;
font:normal 11px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FF1C1C;
border-color:#4C99AB;
border-style:solid;
font:normal 11px Arial;
color: #FFFFFF;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_blue_2.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Home</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
<!-- (c) 2009, PureCSSMenu.com -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
I guess what you want is to have class
Then, in each html page you go to, you add that class to the option the page refers too.
This because of course the html has no way of guessing what do you mean by selected item.
P.S.: Probably you probably don’t want to use an anchor link on that option.
P.P.S.: As others mentioned, if you are using the links in the same page, you need to use javascript. In jQuery, the code could be:
Also, add the class pureCssMenuSelected to the initally selected item, directly in the HTML. Finally, if you use this last solution, call it something other than pure CSS menu 🙂