problem with multilevel menus [Archive]

bigcy

March 29th, 2007, 04:12 AM

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">

<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>

<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>

borrob

March 29th, 2007, 05:00 AM

i've looked at your code but i really don't understand what you want to do. So maybe you could be a bit more clear about what you want. Do you want the first menuitem of the toplevel menu to be highlighted?

bigcy

March 29th, 2007, 05:13 AM

hi
borrob

plz check the attached gif file
it will give u a better idea of what exactly i want

thanks

noTime

March 29th, 2007, 07:10 AM

Maybe this one could be something you might need:

li.sub-select a:hover, li.sub-select a {
background-color: white;
}