Sub-menu items not placed correctly - css

Question

I want the menu subitems to appear just under the menu items. As it is now, they are a bit to right.
CSS
ul#menu {
float:left;
width:100%;
margin:0;
padding:0;
list-style-type:none;
background-color:#D60024;
}
ul#menu > li {
float:left;
display:inline;
position:relative;
padding:3px;
border:1px #8a0505 solid;
background-color:#D60024;
color:white;
}
ul#menu > li:hover {
background:#8a0505;
color:white;
}
ul#menu > li:hover ul {
opacity:1;
left:0;
height:auto;
}
ul#menu li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding: 5px;
margin:0;
opacity:0;
}
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
}
ul#menu ul li:hover {
background:#8a0505;
border:1px #8a0505 solid;
color:white;
}
JSFiddle

Answer 1

modify in your css this: Demo
ul#menu > li:hover ul {
opacity:1;
left:-6px;
}

Answer 2

is not the best solution, but it does what you want
edit this
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
}
in this
ul#menu ul li {
background-color:#D60024;
border:1px #8a0505 solid;
margin-left:-6px;
}

Answer 3

Try this fiddle
CSS changes
ul#menu li ul {
padding: 0;
top:100%;
margin-left:-2px;
}

Answer 4

Working Solution: http://jsfiddle.net/avi_sagi/sTQLh/11/
In css rules for
ul#menu li ul {
padding: 6px;
}
I am assuming u gave it to align the dropdown list items to the bottom of the main menu items.
It is creating the space to the left
The right CSS rule should have been.
ul#menu li ul {
padding: 0px;
margin:4px 0 0 -1px;
}
margin-left:-1px is provided to pull the dropdown left because the 1px border of the main menu is pushing the dropdown it being the main menu list item's child element. its your wish to use it or not.
Its a bad practice to use padding instead of margin. both create spaces but their definition is different and their misuse might create problems.
secondly, these kind of problems arise commonly use Inspect Element or Firebug to see why these spaces are created.
Hope this Helps!

Answer 5

ul#menu li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding: 5px; // to change padding: 5px 5px 5px 0;
margin:0;
opacity:0;
}
See demo your Demo edited