Hi all
this is the code which im using for multilevel menu
What I want is that the first menu of the multilevel menu should be highlighted by default
(It may be bg colour or something like that)
can anyone finds the solution for the same
thanks in advance
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
<title>Untitled Document</title>
<style type=“text/css”>
#maintab{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
}
#maintab li{
display: inline;
margin: 0;
}
#maintab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: black;
background: white;
}
#maintab li a:hover{
color: navy;
background: #EFFADC;
}
#maintab li.selected a{ /*selected main tab style */
background-color: #EFFADC;
border-color: navy;
}
#tabcontent{ /2nd level content wrapper/
border: 1px solid #778;
background-color: #EFFADC;
height: 100% /IE7 beta2 fix/
}
#tabcontent ul{
padding: 0;
margin: 0;
list-style-type: none;
display: none;
}
#tabcontent ul li{
display: inline;
}
#tabcontent ul.selected{ /selected 2nd level content/
display: block;
}
#tabcontent ul li a{
border-right: 1px solid #778;
color: navy;
padding: 2px 5px;
display: block;
float: left;
text-decoration: none;
}
#tabcontent ul li a:hover{
background-color: #D3F1A0;
color: blue;
}
.clearfix:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
display: inline-table;
}
/* Hides from IE-mac */
- html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.tabcontent selected li sub-select {
background-color: #000000;
}
</style>
</head>
<body>
<ul id=“maintab”>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li class=“selected”><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
<div id=“tabcontent” class=“clearfix”>
<!–Sub Content #1 -->
<ul>
<li><a href="#">Sub Content 1 </a></li>
<li><a href="#">Sub Content 2</a></li>
<li><a href="#">Sub Content 3</a></li>
</ul>
<!–Sub Content #2 -->
<ul class=“selected”>
<li class=“sub-select”><a href="#">sub-menu-1</a></li>
<li><a href="#">sub-menu-2</a></li>
<li><a href="#">sub-menu-3</a></li>
<li><a href="#">sub-menu-4</a></li>
</ul>
</div>
</body>
</html>
