Posted by: SajhaHelpUSer December 1, 2010
Style sheet menu
Login in to Rate this Post:     0       ?        

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>

Read Full Discussion Thread for this article