導航菜單不會停留在懸停

Question

希望這裏有人可以幫助我。我創建了一個下拉式導航菜單，除非您將鼠標懸停在列表中的第二個項目上，否則它不會停留在&之上，菜單會再次關閉。這裏的CSS：

****************************************************** 
*Design the main ul 
****************************************************** 
*/ 
#ajonav ul { 
background-color: #a01013; 
padding: 0 0px; 
list-style: none;/*To remove the bullets*/ 
position: relative; 
display: inline-block; 
} 

/* 
************************************ 
*Design the main ul li 
************************************ 
*/ 
#ajonav ul li { 
float: left; 
border-right: 1px solid #a01013; 
} 
#ajonav ul li:hover { 
background-color: #a01013; 
} 
#ajonav ul li:nth-child(5){border-right:none; } 


#ajonav ul li:hover a { 
    color: #efb009; 
} 

#ajonav ul li a { 
    color: #E4E4E4; 
    text-decoration: none; 
    padding: 10px 10px; 
    display: block; 
    font-family: sans-serif,serif; 
} 


/* 
************************************ 
*(Dropdown) Design the sub ul li 
************************************ 
*/ 
/* 
****************************************************** 
*Hide the submenu ul at start 
****************************************************** 
*/ 
#ajonav ul ul{visibility:hidden;display: none;} 
/* 
****************************************************** 
*Show the submenu when li gets hover 
****************************************************** 
*/ 
#ajonav ul li:hover > ul { 

visibility:visible;display: block;} 
#ajonav ul ul { 
position: absolute; 
background-color: #a01013; 
padding: 0px; 
} 

#ajonav ul ul li { 
    position: relative; 
    float: none; 
    border-top: 1px solid #727272; 
} 

#ajonav ul ul li a { 
    padding: 15px 20px; 
    color: #fff; 
} 

#ajonav ul ul li a:hover { 
color: #ffffff; 
    background-color: #a01013; 
} 

如果任何人都可以幫助我;我會很感激。

Answer 1

Thank you trolle, 

    I created a jsfiddle and it worked fine in there; don't get why it's not staying the same way in the actual website page. Strange. 

<center> <div id="ajonav"> 
<ul> 
<li> 
<a href="index.html">Home</a></li> 
    </li> 
<li> 
    <a href="#">Adopt</a> 
    <ul> 
<li><a href="adopt_pol.html">Petfinder Animal List</a></li> 
<li><a href="adopt_fees.html">Petango Animal List</a></li> 
<li><a href="adopt_proc.html">Adoption Information</a></li> 
<li><a href=" " >Printable Adoption Application </a></li> 
<li><a href=" " >Pet of the Week </a></li> 

</ul> 
</li> 

<li> 
<a href="index.html">About Us</a> 
<ul> 
<li><a href="adopt_pol.html">General Info</a></li> 
<li><a href="adopt_fees.html">Our Staff</a></li> 
<li><a href="adopt_proc.html">Statistics</a></li> 

</ul> 
</li> 

<li> 
<a href="#">Our Services</a> 
<ul> 
<li><a href=" ">Pet Surrendering</a></li> 
<li><a href=" ">Microchipping</a></li> 
<li><a href=" ">Community Service Workers</a></li> 
<li><a href=" ">Trap Rental</a></li> 
<li><a href=" ">Humane Education</a></li> 
<li><a href="found.html">Found Animals</a></li> 
<li><a href="lostfound.html">Lost Animals</a></li> 
</ul></li> 


<li> 
<a href="index.html">Get Involved</a> 
<ul> 
<li><a href=" ">Donate</a></li> 
<li><a href=" ">Happy Hour</a></li> 
<li><a href=" ">Wish List</a></li> 
<li><a href=" ">Volunteer</a></li> 
<li><a href=" ">Events</a></li> 
<li><a href="found.html">Aluminum Can Drive</a></li> 
</ul></li> 
    </li> 

<li> 
<a href="index.html">Contact Us</a> 
<ul> 
<li><a href=" ">Hours & Address</a></li> 
<li><a href=" ">Phone/Email</a></li> 
</ul></li> 
    </li> 


</ul> 
</div></center> 


****************************************************** 
*Design the main ul 
****************************************************** 
*/ 
#ajonav ul { 
background-color: #a01013; 
padding: 0 0px; 
list-style: none;/*To remove the bullets*/ 
position: relative; 
display: inline-block; 
} 

/* 
************************************ 
*Design the main ul li 
************************************ 
*/ 
#ajonav ul li { 
float: left; 
border-right: 1px solid #a01013; 
} 
#ajonav ul li:hover { 
background-color: #a01013; 
} 
#ajonav ul li:nth-child(5){border-right:none; } 


#ajonav ul li:hover a { 
    color: #efb009; 
} 

#ajonav ul li a { 
    color: #E4E4E4; 
    text-decoration: none; 
    padding: 10px 10px; 
    display: block; 
    font-family: sans-serif,serif; 
} 


/* 
************************************ 
*(Dropdown) Design the sub ul li 
************************************ 
*/ 
/* 
****************************************************** 
*Hide the submenu ul at start 
****************************************************** 
*/ 
#ajonav ul ul{visibility:hidden;display: none;} 
/* 
****************************************************** 
*Show the submenu when li gets hover 
****************************************************** 
*/ 
#ajonav ul li:hover > ul { 

visibility:visible;display: block;} 
#ajonav ul ul { 
position: absolute; 
background-color: #a01013; 
padding: 0px; 
} 

#ajonav ul ul li { 
    position: relative; 
    float: none; 
    border-top: 1px solid #727272; 
} 

#ajonav ul ul li a { 
    padding: 15px 20px; 
    color: #fff; 
} 

#ajonav ul ul li a:hover { 
color: #ffffff; 
    background-color: #a01013; 
} 

編碼似乎工作正常，除非包括衰落背景;你可以在這裏查看 - http://metroanimalshelter.org/testredesigns2.html - 赦免頁面上的混亂;我有很多佔位符圖像，直到我得到了錯誤。