Question

I have looked long and hard for the error in my CSS. I can’t find it, I am sure it is something obvious, I just cant figure out what it is! The problem is i have a element. #nav li ul, that has a left margin that shouldn’t exist. setting it’s margin: 0px; doesn’t work. Here is the CSS code and the html is located at http://www.letsmine.info/Sundalah. The #nav is the menu, I have only worked on the index, so don’t bother browsing the other pages.

#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 li, #nav li a {
display: block;
height: 39px;
}
#nav li {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
#nav 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 li.menu1 {
width: 118px;
}
body.index #nav li.menu1:hover {
width: 118px;

}
body.index #nav li.menu2 {
width: 212px;
}
body.index #nav li.menu3 {
width: 161px;
}
body.index #nav li.menu4 {
width: 174px;
}
body.index #nav li.menu5 {
width: 193px;
}
body.index #nav li.menu6 {
width: 166px;
}
body.community #nav li ul {
background-color: #AECEAB;
}
body.kids #container #nav li ul {
background-color: #89BAB7;
opacity: 0.8;
}
body.market #nav li ul {
background-color: #FFD0CE;
}
body.sundays #nav li ul {
background-color: #E7DAB2;
}
body.index #nav li ul {
background-color: #E7DAB2;
}
body.contacts #nav li ul {
background-color: #E7DAB2;
}
#nav li ul li a:link {
text-decoration: none;
}
div#container div#nav li ul#sundays li {
width: 211px;
}
div#container div#nav li ul#market li {
width: 161px;
}
div#container div#nav li ul#kids li {
width: 174px;
}
div#container div#nav li ul#community li {
width: 193px;
}
#nav ul {
position: absolute;
top: 30px;
visibility: hidden;
}
#nav li:hover ul {
visibility: visible;
z-index: 9999;
}
#nav li:hover {
opacity: 1;
}
#nav li:hover ul li a:hover {
opacity: 1;
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#nav #holder ul li {
display: inline;
}

Answer 1

Assuming that you’re talking about this page:

http://www.letsmine.info/Sundalah/
(I found a highly likely link on a previous question of yours)

The reason that margin: 0 is not working is because it’s not margin – it’s padding. This will fix it:

#nav li ul {
    padding: 0
}