Question

希望有人可以帮助我。我已经创建了一个下拉导航菜单，除非您将鼠标悬停在下拉项目上，任何超过列表中第二个项目的内容，它都不会停留在＆amp;菜单再次关闭。这是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 - 原谅那里页面上的烂摊子;我已经有很多占位符图像，直到我得到了错误。

导航菜单不会在悬停时停留

1 个答案: