3rd Level navigation for Drop down tabs

[joerubes]

1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I would like to create a third level of navigation for this menu does anyone know how to do this?

Thanks

[Snookerman]

Take a look at these instead:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/ (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/)
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/)

Good luck!

[joerubes]

Thanks. My problem is that I would like to make the tabs curved (that's why I was using the drop down tabs menu) and each tab needs to be a different colour.

I'm not sure how to set the colour span class for each tab...

[joerubes]

I have tried using the slidedown menu to create different coloured tabs.
I am having problems getting the right side curve gif to show and the down arrows in the correct place. Here is the css and html I am using so far.


.jquerycssmenu{
border-bottom: 1px solid #272f43;
width: 920px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 10px;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
margin-right: 10px;
}


.jquerycssmenu ul{
margin: 0;
padding: 0 5px 0 0px;
list-style:none;
font-style: normal;
font-size: 12px;
}

.jquerycssmenu li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


/*Top level list items not in ddtabs*/
.jquerycssmenu ul li{
position: relative;
display: inline;
float: left;
background: transparent url(../images/permanent/tabs_right.gif) no-repeat right top;
}

.jquerycssmenu a{
float:right;
color: white;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.jquerycssmenu a span{
float:right;
display:block;
padding: 8px 8px 8px 7px;
}

.jquerycssmenu a span{
float:none;
}


/*1st sub level menu*/
.jquerycssmenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
color: white;
font-size: 12px;
opacity: 0.85;
border: 1px solid #485368; /*THEME CHANGE HERE*/
border-top-width: 2px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
line-height: 18px;
z-index:100;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jquerycssmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jquerycssmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
font-size: 12px;
opacity: 0.90;
width: 150px; /*width of sub menus*/
padding: 4px 5px;
margin: 0;
border-top-width: 0;
color: #ffffff;
}


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 7px;
right: 5px;
padding-right: 5px;
}

.rightarrowclass{
position: absolute;
top: 5px;
right: 5px;
}



/* Navigation ///////////////////////////////////////////////////////////////*/


.hometabs a{
background: #464873 url(../images/permanent/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding: 5px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.hometabs a:hover{
background-color: #464873;
color: #edeae4;
}

.hometabs a:hover span{
background-color: #464873;
color: #edeae4;
}

.whotabs a{
float:right;
color: white;
background: #485368 url(../images/permanent/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding: 5px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.whotabs a:hover{
background-color: #485368;
color: #edeae4;
}

.whotabs a:hover span{
background-color: #485368;
color: #edeae4;
}


.communitytabs a{
float:right;
color: white;
background: #42809b url(../images/permanent/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding: 5px;
text-decoration:none;
letter-spacing: 1px;
}

.communitytabs a:hover{
background-color: #42809b;
color: #edeae4;
}

.communitytabs a:hover span{
background-color: #42809b;
color: #edeae4;
}

.longtabs a{
float:right;
color: white;
background: #736140 url(../images/permanent/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding: 5px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.longtabs a:hover{
background-color: #736140;
color: #edeae4;
}

.longtabs a:hover span{
background-color: #736140;
color: #edeae4;
}

/* ######### Style WHO WE ARE for Drop Down Menu ######### */

.dropmenudiv_h{
background-color: #485368;
}

.dropmenudiv_h a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #ffffff;
border-bottom: 1px solid #ffffff; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;

}

* html .dropmenudiv_h a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_h a:hover{ /*THEME CHANGE HERE*/
background-color: #485368;
color: #edeae4;
}

/* ######### Style for community Drop Down Menu ######### */

.dropmenudiv_c{
background-color: #42809b;
}


.dropmenudiv_c a{
width: auto;
text-indent: 5px;
border-top: 0 solid #ffffff;
border-bottom: 1px solid #ffffff; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: #ffffff;
}

* html .dropmenudiv_c a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #42809b;
color: #edeae4;
}


/* ######### Style for long Drop Down Menu ######### */

.dropmenudiv_m{
background-color: #736140;
}


.dropmenudiv_m a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #ffffff;
border-bottom: 1px solid #ffffff; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: #ffffff;
}

* html .dropmenudiv_m a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_m a:hover{ /*THEME CHANGE HERE*/
background-color: #736140;
color: #edeae4;
}




/*end of navigation ////////////////////////////////////////////////////// */



and the html:


<div id="myslidemenu" class="jquerycssmenu">
<ul>
<span class="hometabs"><li><a href="#">HOME</a></li></span>
<li><span class="whotabs"><a href="#">WHO WE ARE</a></span>
<ul class="dropmenudiv_h">
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><span class="communitytabs"><a href="#">OUR COMMUNITY</a></span>
<ul class="dropmenudiv_c">
<li><a href="#">Section 1</a>
<ul class="dropmenudiv_c">
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a> </li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Section 2</a>
<ul class="dropmenudiv_c">
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a> </li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Section 3</a>
<ul class="dropmenudiv_c">
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a> </li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><span class="longtabs"><a href="#">A longer tab title </a></span>
<ul class="dropmenudiv_m">
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>