CSS flyout menu tutorial: What is this 10px margin for -- newb question

Ok here is the code -- my question is further below

The tutorial is from this page:
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

Code (markup):

CSS Code

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }

#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

#nav li{
    float:left;
    position:relative;
}

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}

#nav li ul a{
    width:12em;
    float:left;
}

#nav ul ul{
	top:auto;
	}	

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

Code (css):

And here is the part that I dont understand/cant figure out

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

Code (markup):

The 10 px margin

All of the widths in em of all the elements are set equal, so it would seem to me, without the 10px margin on left, everything would be even, since the widths are even. I.e. #nav li ul a and #nav ul are both set to 12 em, and #nav li ul ul is set to left:14em.

So why is the 10px margin-left needed to make it horizontally even? If I remove the 10px margin, then #nav ul ul overlaps on #nav ul. Where is this extra 10px coming from?

 

It's to make up for the 5px of padding on the anchors - no joke. They're overflowing their containers... In general that's a REALLY bad way to build a menu since it's mixing px paddings with EM widths - and that fix PROBABLY requires targeted hacks to make it work in IE 6 & 7... and sure as shine will never work right in 5.x (not that 5.x matters all that much, but it's so easy to support on something like this)... as if we wouldn't be throwing enough fixes at making it work in 6 in the first place. Worse, it uses display:none which google has been known to pay attention to - ignoring the links inside the menu for indexing.

My approach to that would be something like this:

/* assumes you are using a reset on UL, LI and A */

#nav {
	width:100%;
	float:left; /* wrap floats */
}

#nav,
#nav ul{
	list-style:none;
  position:relative;
  line-height:1.5em;
}

#nav li {
	float:left;
	position:relative;
	zoom:1; /* trip haslayout, make IE behave */
}

#nav a {
	display:inline-block;
  padding:0 5px;
  color:#FFF;
  text-decoration:none;
  background:#333;
	border:1px solid #333;
}

#nav a:hover {
	color:#333;
	background:#FFF;
}

#nav ul a {
	display:block;
}

#nav li ul { /* include li for specificity issues */
	position:absolute;
	width:12em;
	top:1.5em;
	left:-999em;
	margin-top:2px; /* push down thanks to border! */
	display:inline; /* IE won't render move without state change */
}

#nav li li {
	width:12em;
}

#nav li:hover ul {
	left:0;
	display:block;
}

#nav li li:hover ul {
	top:0;
	left:12em;
	margin:0;
}

Code (markup):

Which still has an oddball margin, but in a 'cute' place - a top margin on our EM positioned first level cascade to account for the 1px border. (one px each side equals 2 extra px atop our EM line-height).

That's basically all that extra 10px margin was for - to make up for the padding which was widening that menu item sideways 10px - and you cannot state PX in EM since EM is not a fixed size. I dodge that bullet by not specifying a width on the anchor, and setting it to display:inline block. That way you can set padding until blue in the face without worrying about it. This also means that it will work all the way back to IE 5.x

Not that 5.x matters, but it's such a simple change and less headaches.

 

Thanks a lot

 

that really lol
i also designed the same in one website using javascript in silversteak.com