Is it possible to add a dropshadow to this menu even though I am using images for the items that currently dropdown? The reason I ask because when you mouse over the main navigation and then go to the items below all the links that are hovered over take on the color of #777.
* {
margin: 0;
padding: 0;
}
body {
background: transparent url('sample_bg.png') repeat-x 0 0;
}
#bodywrapper {
margin: 37px auto 0;
max-width: 960px;
min-width: 600px;
padding: 10px;
background: #fdfdfd;
}
* html #pagewrapper {
width: 960px;
}
#header {
margin: 0 0 4px;
height: 100px;
background: #ccc;
}
/* topmost navlink styles */
#nav {
margin: 0 auto;
width: 960px;
height: 40px;
font: bold 13px/1.2 Arial;
}
#nav ul li {
float: left;
width: 120px;
list-style: none;
}
#nav ul li a {
display: block;
visibility: visible;
/*border: 1px solid #999;*/
padding-top: 12px;
height: 28px;
background: url("nav_image.png") repeat-x -81px 100%;
color: #ddd;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
background:url('nav_image.png') repeat-x -40px 0%;
}
/*----- Begin Second Level ----- */
#nav ul,
#nav ul ul li{
position: relative;
margin: 0;
padding: 0;
}
#nav ul li ul {
position: absolute;
left: -999em;
top: 40px;
height: 40px;
}
#nav ul li:hover ul ul,
#nav ul li.sfhover ul ul {
left: -999em;
}
#nav ul li:hover ul,
#nav ul li.sfhover ul,
#nav ul ul li:hover ul,
#nav ul ul li.sfhover ul {
left: auto;
}
#nav ul ul.subhor-1item li {
width: 120px;
}
#nav ul ul.subhor-2items li {
width: 240px;
}
#nav ul ul.subhor-3items li {
width: 160px;
}
#nav ul ul.subhor-4items li {
width: 120px;
}
#nav ul ul ul li {
clear: left;
}
/****** Link Styling ******/
#nav ul li:hover a,
#nav ul li.sfhover a,
#nav ul li a:hover {
background:#777;
color: #eee;
}
#nav ul li a:hover {
background: url('nav_image.png') repeat-x -40px 0%;
}
#nav ul li ul li a:hover {
background: url('subver_bg.png');
color: #fff;
}
#contentwrapper {
margin-top: 5px;
height: 750px;
background: #e3e3e2;
}
