Need some help cleaning up this nav menu.

[nlraley]

I almost have my nav menu set up, but I am getting a really annoying occurence and was wandering if someone might help me determine the best approach to fix the issue?

My problem is, that I have my nav menu as an unordered list and I have the menu itself and the list items set to the perfect height for my page layout. However, there is a very small dead-zone between the first unordered list, my navigation headers, and the list items embedded in the unordered that drops down when the first item in the upper unordered list is selected. When people slowly hover over the dead-zone described above, before the first list item and its drop down menu, you can hit this zone and it will close out of the menu unexpectedly.

Is there any way to keep the size of the list-items and unordered list and reduce this dead-zone where it closes out of the menu?

Here is the code for the css for the nav menu:

/* CSS Document */
/* Top Navigation Menu Layout */
#navmenu {
float: left;
height: 29px;
width: 100%;
line-height:29px;
background: #ededed url(buttonbg.png);
background-repeat: repeat-x;
text-align: center;
font-family: Verdana, helvetica;
color: #004777;
}
 
#navmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 29px;
}
#navmenu ul li {
position: relative;
float: left;
height: 29px;
width: 115px;
background: #ededed url(buttonbg.png);
}
 
#navmenu a, #menu h2 {
font: bold 13px/18px Verdana, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
background: #ededed;
margin: 0;
padding: 5px 6px;
}
 
#navmenu h2 {
color: #fff;
background: #5494c2;
text-transform: uppercase;
}
 
#navmenu a {
color: #393939;
background: #ededed url(buttonbg.png);
text-decoration: none;
}
 
#navmenu a:hover {
color: #0ea2ca;
background: #fff;
}
 
#navmenu li {
position: relative;
float: left;
width: 115px;
}
 
#navmenu ul ul {
position: absolute;
z-index: 500;
}
 
#navmenu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
 
div#navmenu ul ul,
div#navmenu ul li:hover ul ul,
div#navmenu ul ul li:hover ul ul
{display: none;}
 
div#navmenu ul li:hover ul,
div#navmenu ul ul li:hover ul,
div#navmenu ul ul ul li:hover ul
{display: block;}

And here is the html section calling the navmenu above (I just took the part where the list was called):

<div id= "navmenu">
<ul>
<li><a href="">Internet</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Telephone</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">Television</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">About Us</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
<li><a href="">FAQ</a>
<ul>
<li><a href="test.html">Test 1</a></li>
<li><a href="test.html">Test 2</a></li>
<li><a href="test.html">Test 3</a></li>
</ul>
</li>
</ul>
</div>

Thanks in advance.

[SuzyUK]

Hi nlraley

it's not reproducing, for me, with that code, but If the "dead zone" is about 1px tall, try adding

margin-top: -1px

to your

#navmenu ul ul {}

rule.

Not related, and may not be apparent to you depending on your other code, a little tip to help IE, remove the

text-align: center;

from

#navmenu {}

and put it on

#navmenu a {}

IE is aligning the drops to the center because of that, changing it put all browsers back on an even keel.

[nlraley]

Sweet, works great! Thanks.