I have a CSS menu with heading and lists and i want a way to highlight e current page where the user is the code is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title> A </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Try this ">
<meta name="description" content="Using ">
<link href="../../../../XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/Desktop/tanfa.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen">
/*
menu coding
*/
#menu
{
width: 6.6em;
background: #3f6fb7;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2
{
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #3f6fb7;
}
#menu h2:current
{
color: #3f6fb7;
background: #d1cf9f;
}
#menu h2:hover
{
color: #3f6fb7;
background: #d1cf9f;
}
#menu h2:visited
{
color: #3f6fb7;
background: #d1cf9f;
}
#menu h2:active
{
color: #3f6fb7;
background: #d1cf9f;
}
#menu h2
{
color: #fff;
background:#3f6fb7;
}
#menu a
{
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover
{
color: #a00;
background: #d1cf9f;
}
#menu li
{
position: relative;
}
#menu ul ul ul
{
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
ul.sidenav li a:hover
{
background: #d1cf9f no-repeat 5px 7px;
border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span
{
display: inline;
font-size: 0.8em;
padding: 10px 0;
}
#nav
{
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
background-color:#3f6fb7 ;
}
#nav li
{
float: left;
}
#nav li a
{
display:block;
padding: 10px 10px;
text-decoration: none;
font-family:"Arial";
color: white;
border-right: 1px solid #ccc;
font-size: 15px;
}
#nav li a:hover
{
color: #3f6fb7;
background-color: #d1cf9f;
}
#nav li a:active, #nav a:focus, #nav a:hover {
color:red;
}
#nav li a.highlite {
color:black;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
<script language="JavaScript" type = "text/javascript">
<!--
<!-- Begin
var current = document.getElementById('default');
function highlite(el)
{
if (current != null)
{
current.className = "";
}
el.className = "highlite";
current = el;
}
// </script>
</head>
<body bgcolor="#FFFFFF" onLoad="preloadImages();">
</body>
</html>
