Hello i have run into a little doozy, i have added a background image to the navigation bar that i made and its working good, but how do i change it so that my dropdown or submenu items do not share this background? i would like it to be just a simple dark grey and it keeps using my image, the css is below. Excuse my notes
SITE:http://www.ballinanswweather.com/
______________________________________
@charset "utf-8";
#navMenu {
margin:0;
padding:0;
/* the padding and margin 0 removes the default padding */
}
#navMenu ul {
margin:0;
padding:0;
line-height:40px; /* how high we want the text to be */
/* the padding and margin 0 removes the default padding */
}
/* this is how we want the list to appear */
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
background-image:url(../images/nav-normal.jpg);
}
/* this is where we style what the navbar links look like on the main menu part */
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
font-size:14px;
text-decoration:none;
height:40px;
width:140px;
display:block; /* for navbar to look like a navbar */
color:#FFF; /* color of the link text */
/*border:1px solid #FFF;*/ /* this adds a border on the outside of the links NOTE the positioning of the hover will be off!!! fix by adding how many pixels you used for the border into the ul ul 2 times the amount eg. if 1 px use 2px */
text-shadow: 1px 1px 1px #000;
}
/* this makes the dropdown hover effect work for a ul inside a ul */
#navMenu ul ul {
position:absolute;
visibility:hidden; /* hides the submenu links */
top:40px; /* same height as the links, this is also where we adjust the border pixels used for the ul li a */
height:20px;
}
/* this is used to bring back the hidden submenu items */
#navMenu ul li:hover ul {
visibility:visible; /* this is used to show the submenu when hovered over */
}
/**************************************************************************************************************************/
/* this adds style to the main horizontal menu */
#navMenu li:hover {
background:#09f;
}
/* this changes the hover effect of the submenu items and will enable the top items to stay another color */
#navMenu ul li:hover ul li a:hover {
background:#ccc;
color:#000;
}
/* changes the hover text color of the main menu on the top and then when you go down the submenu it changes back to the color of the normal hover */
#navMenu a:hover {
color:#000;
}
.clearFloat {
clear:both; /* clears the left and the right */
margin:0;
padding:0;
}
Login 
Register
Enhancement requests
Search
