CSS, Most Specific (Help) - html

Question

have small... big problem with my css. I have a couple of values that are becoming more specific than others. Interestingly the selector which is being overridden has !important on more then one of its values. What more can i say here is the CSS
This is what is being overwritten:
div#container div#nav div#specefic ul li ul#sundays li{
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li{
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li{
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li{
width: 193px !important;
}
You can also view an example of this at http://www.letsmine.info/Sundalah
-
#nav {
margin:0;
width:auto;
height:39px;
}
#nav ul {
margin:0;
padding:0;
line-height:30px;
width: 1024px;
height: 39px;
background: url(../index_files/menu.jpg);
position: relative;
}
}
#nav ul li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#nav ul li, #nav ul li a {
height: 39px;
display: block;
}
#nav li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}
#nav ul li ul {
background-color: #f2ead5;
margin-top: 8px;
text-align:center;
color:#2a8ac6;
font-family:"Arial";
font-size:19px;
-moz-box-shadow: 3px 3px 3px #cc8930;
-webkit-box-shadow: 3px 3px 3px #cc8930;
box-shadow: 3px 3px 3px #cc8930;
float:none;
opacity: 0.9;
}
body.index #nav ul li.menu1{
width: 118px;
}
body.index #nav ul li.menu1 a:hover{
background: transparent url(../index_files/menu.jpg) 0 0px no-repeat;
}
body.index #nav ul li.menu2 {
left: 119px;
width: 212px;
}
body.index #nav ul li.menu2 a:hover{
background: transparent url(../index_files/menu.jpg) 119px 0px no-repeat;
}
body.index #nav ul li.menu3 {
left: 332px;
width: 161px;
}
body.index #nav ul li.menu3 a:hover{
background: transparent url(../index_files/menu.jpg) 332px 0px no-repeat;
}
body.index #nav ul li.menu4 {
left: 494px;
width: 174px;
}
body.index #nav ul li.menu4 a:hover{
background: transparent url(../index_files/menu.jpg) 494px 0px no-repeat;
}
body.index #nav ul li.menu5 {
left: 669px;
width: 193px;
}
body.index #nav ul li.menu5 a:hover{
background: transparent url(../index_files/menu.jpg) 669px 0px no-repeat;
}
body.index #nav ul li.menu6 {
left: 863px;
width: 166px;
}
body.index #nav ul li.menu6 a:hover{
background: transparent url(../index_files/menu.jpg) 863px 0px no-repeat;
}
body.community #nav ul li ul {
background-color: #aeceab;
}
body.kids #container #nav ul li ul {
background-color: #89bab7;
opacity: 0.8;
}
body.market #nav ul li ul {
background-color: #ffd0ce;
}
body.sundays #nav ul li ul {
background-color: #E7DAB2;
}
body.index #nav ul li ul {
background-color: #E7DAB2;
}
body.contacts #nav ul li ul {
background-color: #E7DAB2;
}
#nav ul li ul li a:link{
text-decoration: none;
}
div#container div#nav div#specefic ul li ul#sundays li{
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li{
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li{
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li{
width: 193px !important;
}
/*********************************************/
/* hide menu and allow it to return */
/*********************************************/
#nav ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#nav ul li:hover ul {
visibility:visible;
z-index:9999;
}
/**********************************************/
/*sets top level hover color*/
#nav li:hover {
opacity: 1;
}
/*sets link items hover color and background*/
#nav ul li:hover ul li a:hover {
opacity: 1;
}
/* Contains the Float */
.clearFloat {
clear:both;
margin:0;
padding:0;
}
/* IE7 Display Fix */
#nav #holder ul li {
display: inline;
}

Answer 1

Your CSS is in a real mess I removed some of unnecessary things from there which caused the issues.
your drop.css:
#nav {
height: 39px;
margin: 0;
width: auto;
}
.mainmenu {
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent;
height: 39px;
line-height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 1024px;
}
#nav ul li, #nav ul li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav ul li ul {
background-color: #F2EAD5;
box-shadow: 3px 3px 3px #CC8930;
color: #2A8AC6;
float: none;
font-family: "Arial";
font-size: 19px;
margin-top: 8px;
opacity: 0.9;
text-align: center;
}
body.index #nav ul li.menu1 {
width: 118px;
}
body.index #nav ul li.menu2 {
width: 212px;
}
body.index #nav ul li.menu3 {
width: 161px;
}
body.index #nav ul li.menu4 {
width: 174px;
}
body.index #nav ul li.menu5 {
width: 193px;
}
body.index #nav ul li.menu6 {
width: 166px;
}
body.community #nav ul li ul {
background-color: #AECEAB;
}
body.kids #container #nav ul li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #nav ul li ul {
background-color: #FFD0CE;
}
body.sundays #nav ul li ul {
background-color: #E7DAB2;
}
body.index #nav ul li ul {
background-color: #E7DAB2;
}
body.contacts #nav ul li ul {
background-color: #E7DAB2;
}
#nav ul li ul li a:link {
text-decoration: none;
}
div#container div#nav div#specefic ul li ul#sundays li {
width: 211px !important;
}
div#container div#nav div#specefic ul li ul#market li {
width: 161px !important;
}
div#container div#nav div#specefic ul li ul#kids li {
width: 174px !important;
}
div#container div#nav div#speceficul li ul#community li {
width: 193px !important;
}
#nav ul ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav ul li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav ul li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}
also in your html change the first to thats the class which I added so it doesn't clash with the sub menu (thats why you could see the menu image in there).
Hope it helps
EXAMPLE 2
to use images in , don't put any image in and use this code... NB! this is only a sample!
.menu1 {
background-position: 0 0;
}
.menu2 {
background-position: 0 -16px;
}
.menu3 {
background-position: 0 -32px;
}
.menu4 {
background-position: 0 -49px;
}
.menu5 {
background-position: 0 -64px;
}
.menu, .menu2, .menu3, .menu4, .menu5 {
background-image: url("images/menuiconset.png");
background-repeat: no-repeat;
height: 16px;
width: 180px;
}
if all buttons are the same size .. put height and width in .menuX if buttons are different size