dd menu coloured tabs

[joerubes]

I am using the DD colour tabs menu to create a navigation bar. I would like to have each tab colour coded and linked to their drop downs. I have gotten as far as having the tabs colour set but I cannot get the colours right when i mouse over the drop down links.

I'd appreciate any help!

Here's the CSS so far:

.ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 12px "Myriad Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin:0;
padding:0;
list-style:none;
}

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


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

.ddcolortabs a span{
float:right;
display:block;
background: transparent url(../images/tabs_right.gif) no-repeat right top;
padding: 8px 8px 8px 7px;
}

.ddcolortabs a span{
float:none;
}





.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 2px;
line-height: 2px;
background: #464873;
}


.hometabs a{
float:right;
color: white;
background: #464873 url(../images/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 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/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 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/tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

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

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




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

.resourcestabs a:hover{
background-color: #f2c063;
color: #edeae4;
}

.resourcestabs a:hover span{
background-color: #f2c063;
color: #edeae4;
}

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

.dropmenudiv_h{
position:absolute;
top: 0;
border: 1px solid #485368; /*THEME CHANGE HERE*/
border-top-width: 2px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px "Myriad Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height:18px;
z-index:100;
background-color: #485368;
width: 200px;
visibility: hidden;
}


.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;
color: #ffffff;
}

* 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{
position:absolute;
top: 0;
border: 1px solid #42809b; /*THEME CHANGE HERE*/
border-top-width: 2px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px "Myriad Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height:18px;
z-index:100;
background-color: #42809b;
width: 200px;
visibility: hidden;
}


.dropmenudiv_c 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_c a{ /*IE only hack*/
width: 100%;
}

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

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

.dropmenudiv_r{
position:absolute;
top: 0;
border: 1px solid #f2c063; /*THEME CHANGE HERE*/
border-top-width: 2px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px "Myriad Pro", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height:18px;
z-index:100;
background-color: #f2c063;
width: 200px;
visibility: hidden;
}


.dropmenudiv_r 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_a a{ /*IE only hack*/
width: 100%;
}

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

and here's the html:

<!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" lang="en" xml:lang="en">
<head>
<title></title>

<script type="text/javascript" src="js/dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="css/navigation.css" />

</head><body>





<div id="colortab" class="ddcolortabs">
<ul>
<li class="resourcestabs"><a href="#" title="Resources" rel="dropmenu6_a"><span>RESOURCES</span></a></li>
<li class="communitytabs"><a href="#" title="Our Community" rel="dropmenu2_a"><span>OUR COMMUNITY</span></a></li>
<li class="whotabs"><a href="#" title="Who We Are" rel="dropmenu1_a"><span>WHO WE ARE</span></a></li>
<li class="hometabs"><a href="#" title="Home"><span>HOME</span></a></li>
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>


<!--WHO WE ARE drop down menu -->                                                   
<div id="dropmenu1_a" class="dropmenudiv_h">
<a href="#">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></div>


<!--OUR COMMUNITY drop down menu -->                                                
<div id="dropmenu2_a" class="dropmenudiv_c">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>



<!--RESOURCES drop down menu -->                                                
<div id="dropmenu6_a" class="dropmenudiv_r">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", "auto")
</script>


</body>

</html>

[ddadmin]

Well, the script applies a CSS class of "selected" to the selected tab's LI element. The default CSS for it is:

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #591f20;
}

This does conflict with how you're currently individually styling each tab, by adding a CSS class within each tab's LI element, ie:

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

When the mouse rolls over the tab, the script will overwrite the "communitytabs" class with "selected" instead. What you try doing is add a SPAN that wraps around each LI element, and apply your custom classes to the SPAN instead:

<div id="colortab" class="ddcolortabs">
<ul>
<span class="communitytabs"><li class="resourcestabs"><a href="#" title="Resources" rel="dropmenu6_a"><span>RESOURCES</span></a></li></span>
"
"
</ul>
</div>

[joerubes]

Thank you

that works perfectly!