My css dropdown menu appears 1 out of 5 times. Why?_问答_开发者

I have coded a css dropdown menu. But when I hover over the parent menu, a child menu appears and when I try to hover over it to click it, the dropdown menu disappears.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul id="nav">
        <li class="top"><a href="#" class="top_link"><b>Reservation</b></a>
            <ul class="sub">
                <li><a href="#">New Reservation</a></li>
                <li><a href="#">Search Reservation</a></li>
                <li><a href="#">Search Customer</a></li>
                <li><a href="#">Search Reservation</a></li>
            </ul>
        </li>
        <li class="top"><a href="#" class="top_link"><b>Rentals</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tariffs</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Fleet</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Tools</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>Reports</b></a></li>
        <li class="top"><a href="#" class="top_link"><b>System Management</b></a></li>
    </ul>
</body>
</html>

CSS

#nav {
    padding:0;
    margin:0;
    list-style:none;
    font-family:arial, verdana, sans-serif;
    height: 36px;
    width:960px;
    background-color: #fff;
    background-image: url(../images/menur_bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #666666;
}
#nav li.top {
    display: block;
    float: left;
    padding-right: 6px;
    padding-left: 12px;
    background-image: url(../images/separator.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
#nav  li  a.top_link {
    display:block;
    float:left;
    color:#333333;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    line-height: 36px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 12px;
}
#nav li a.top_link b {
    display: block;
    float: left;
    padding-right: 10px;
}
#nav li:hover a.top_link   {
    background-image: url(../images/menur_hover_left.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin: 0px;
}
#nav        li:hover       a.top_link b     {
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin: 0px;
}

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{
    left:-1px;
    padding:0px;
    height:auto;
    z-index:300;
    top: 38px;
}
#nav li:hover ul.sub li
{
    display:block;
    position:relative;
    float:left;
    font-weight:normal;
    height: 33px;
}
#nav li:hover u开发者_如何学Pythonl.sub li a
{
    display:block;
    font-size:11px;
    height:30px;
    width:120px;
    line-height:33px;
    text-indent:5px;
    color:#000;
    text-decoration:none;
    border:1px solid #bbd37e;
    background-image: url(../images/dropdown_strip.gif);
    background-repeat: repeat-x;
    font-weight: bold;
}

#nav li:hover ul.sub li a:hover 
{
    color:#fff;
    border-color:#fff;
    background-color: #ECE9D8;
    background-repeat: repeat-x;
}

/*secondry ul align ment + colour*/
#nav li:hover li:hover ul,

{
    left:90px;
    top:-4px;
    padding:3px;
    border:1px solid #5c731e;
    white-space:nowrap;
    width:90px;
    z-index:400;
    height:auto;
    background-color: #FF00FF;
}
/* alignment of the whole thing - positioning */

#nav ul,
#nav li:hover ul ul
#nav li:hover li:hover ul ul
#nav li:hover li:hover li:hover ul ul
{
    width:0;
    height:0;
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    left: -9999px;
    top: -9999px;
    color: #000000;
    background-color: #330066;
}
#nav li a {
    cursor:pointer;
}
/* hpver text + style of the secondary uls and so on */
#nav li:hover li:hover li a
#nav li:hover li:hover  li:hover li a
#nav li:hover li:hover li:hover li:hover li a

{
    border-color:#fff;
    background-color: #FF3366;
}

If someone can tell me a way of delaying the css drop down menu(child menu) till the mouse pointer hovers over it, it would be helpful.

This happens because there is the minor space between the Parent menu and Child menu also between Two child menu. While mouse enters in this gap your menu becomes disappear.

What you can do to solve this is you can increase the height of <a> tag and this will not make the cursor to go inside the blank space between two menus.