CSS Sub-menu item will not let me hover it - css

Question

I am trying to do a menu in CSS with a Unordered List UL, I have it almost working correctly.
I am having a little trouble, if you run the code below or look at it on the JSFiddle link here http://jsfiddle.net/hgBDV/1/ You will see there is a Horizontal menu, when you hove the 2nd to last item labeled "More" there is a Sub-menu.
That sub-menu is what I need help with, right now when you hover the "Menu" list item, the sub-menu becomes visible on the screen however you are unable to hover of the sub-menu.
Please help me correct this issue
<div id="nav-wrapper">
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>More
<ul>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
</ul>
</li>
<li>Link 7</li>
</ul>
</div>
css
<style type="text/css">
#nav-wrapper ul {
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display: inline;
margin: 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
line-height: 45px;
font-size: 13px;
color: #666;
padding: 5px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul,
#nav-wrapper ul li:hover ul ul,
#nav-wrapper ul ul li:hover ul ul{
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul,
#nav-wrapper ul ul li:hover ul,
#nav-wrapper ul ul ul li:hover ul{
display: block;
margin:0;
padding:0px 2px 2px 0px;
border-color:#AAAAAA;
border:1px;
border-style:solid;
}
</style>

Answer 1

http://jsfiddle.net/hgBDV/2/
You are having trouble because the line-height is 45px but your text-size is 13px. The sub-menu shows up when you hover over the 'more' link, but when you move your mouse outside of the bounds of the 'more' link, the sub-menu is no longer displayed. While you have set the margin to 0px, the line-height is allowing for a 20px gap. In my 'fix', i have set the line height to 0px. Google "css suckerfish" for an already invented wheel.

Answer 2

deleted the thing line-height
#nav-wrapper ul {
width: 700px;
float: right;
margin: 0;
list-style-type: none;
}
#nav-wrapper ul li {
vertical-align: middle;
display:inline;
margin: 0 0 0 0;
color: black;
list-style-type: none;
}
#nav-wrapper ul li a {
text-decoration: none;
white-space: nowrap;
font-size: 13px;
color: #666;
padding: 5px 15px 5px 15px;
margin: 5px 0px 0px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#nav-wrapper ul li a:hover {
color: #fff;
background-color: #4caef2;
}
#nav-wrapper ul li a:visited {
color: #666;
}
/* Hide Sub-menus */
#nav-wrapper ul ul {
display: none;
}
/* SHOW Sub-menus on HOVER */
#nav-wrapper ul li:hover ul{
display:block;
margin:3px 0 0 0; /* if you change top value here thing will screw up */
padding:0px 2px 2px 0px;
border-color:#AAAAAA;
border:1px;
border-style:solid;
}