CSS: drop down menu not selecting correctly; margin spacing? - html

Question

I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}

Answer 1

see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}