I have a horizontal nav menu in which the client has asked me to add a few sub-menu drop-downs for various sections. The current menu has a gradient fade image that repeats at hover
and selected state when the page is viewed. I achieved this by giving each page in a particular section a <body id"___"> tag. For example, all pages in the "services" section have the tag <body id="services"> to allow the style sheet to control the selected state.
Now that I have added the sub-menus, they are consistently in the selected state. The client wishes for them to have a black background unless they are hovered. I cannot figure out where my error is. Is it in the style sheet or the nav include file??
The site is located on my development server here:
http://www.netfusionstudios.com/webd...h/services.php
Here is the code for the nav include (nav.html):
Code:
<ul>
<li id="t-home"><a href="index.php">Home</a></li>
<li id="t-builder_profile"><a href="builderprofile.php" class="current" >Builder Profile</a></li>
<li id="t-services"><a href="services.php" >Services</a>
<ul>
<li><a href="newconstruction.php">New Construction</a>
<li style="border-bottom:none;"><a href="renovation.php" >Renovations/Additions</a></li>
</ul>
</li>
<li id="t-communities"><a href="communities.php" >Communities</a>
<ul>
<li id="t-communities"><a href="canyonwoods.php">Canyon Woods</a></li>
<li id="t-communities" style="border-bottom:none;"><a href="hiddencanyon.php" >Hidden Canyon</a></li>
</ul>
</li>
<li id="t-gallery"><a href="gallerymain.php">Gallery</a></li>
<li id="t-testimonials"><a href="testimonials.php">Testimonials</a></li>
<li id="t-contact"><a href="contact.php" >Contact</a></li>
</ul>
Here is the portion of the style sheet that controls the nav menu:
Code:
/*----nav menu buttons----*/
.menu{
width:796px;
height:44px;
float:left;
background:url(../images/menu-bg.jpg) top left no-repeat #29100c;
}
.menu ul {
float: right;
margin: 0px;
padding: 0 0 0 0;
width: 796px;
list-style: none;
}
.menu ul li {
display: block;
float:left;
position:relative;
}
.menu ul li a {
float: left;
padding:14px 16px 14px 16px;
text-align: center;
text-decoration: none;
text-transform:uppercase;
color:#fae6bc;
font-family:Helvetica;
font-size: 12px;
letter-spacing:1px;
outline: none;
font-weight:bold;
}
.menu li a:hover, body#home #t-home a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#builder_profile #t-builder_profile a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#services #t-services a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#communities #t-communities a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#gallery #t-gallery a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#testimonials #t-testimonials a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
.menu li a:hover, body#contact #t-contact a {
color:#FFFFFF;
background:url(../images/menu-hover.jpg) top left repeat-x;
}
/*----sub-menu buttons----*/
.menu ul ul{
display:none;
}
.menu ul li:hover ul{
width:200px;
border:#695c42 1px solid;
text-align:center;
display:block;
position:absolute;
top:43px;
left:0px;
background:#000000;
}
.menu ul ul li{
border-bottom:#695c42 solid 1px;
width:200px;
display:block;
clear: both;
}
.menu ul ul li a{
font-size:10px;
padding:10px 12px 10px 12px;
width:176px;
}
Thank you in advance for any help you can provide.
Before you post, read our: 
