# Problem with multilevel menus

**URL:** <https://forum.kirupa.com/t/problem-with-multilevel-menus/220787>\
**Category:** Uncategorized\
**Created:** [March 29, 2007, 8:12am UTC](https://forum.kirupa.com/t/problem-with-multilevel-menus/220787 "2007-03-29T08:12:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![bigcy](https://avatars.discourse-cdn.com/v4/letter/b/ea666f/32.png) [@bigcy](https://forum.kirupa.com/u/bigcy)\
**Post date:** [March 29, 2007, 8:12am UTC](https://forum.kirupa.com/t/problem-with-multilevel-menus/220787/1 "2007-03-29T08:12:29Z")

</div>

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](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)”\>  
\<html xmlns=“[http://www.w3.org/1999/xhtml](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\>
