jQuery/CSS - 導航鏈接側面菜單

Question

我有一個水平導航菜單，當您將鼠標懸停在「Online Booking」上時，它會下拉菜單並提供更多選項。當我將鼠標懸停在「信用卡」下拉選項上時，我希望菜單顯示在旁邊（左：100％）。

的HTML如下： -

<div id="main-links"> 

    <div id="main-links-content"> 

     <ul class="topnav"> 

      <li><a class="link active" href="index.php">Aberdeen Taxis</a></li> 
      <li><a class="link" href="#!">About Us</a></li> 
      <li><a class="link" href="#!">Our Services</a></li> 
      <li><a class="link" href="#!">Our Tours</a></li> 
      <li><a class="link" href="#!">Our Fares</a></li> 
      <li><a href="#">Online Booking</a> 
       <ul class="dropdown"> 
        <li><a href="onlinebooking-ab/login-cash.php">Cash Booking</a></li> 
        <li><a href="onlinebooking-ab/login.php">Account Booking</a></li> 
        <li><a href="onlinebooking-ab/login-guest.php">Credit Card Booking</a> 
         <ul class"sidedrop"> 
          <li><a href="#">HTML</a></li> 
          <li><a href="#">CSS</a></li> 
         </ul> 

        </li> 
       </ul> 
      </li> 
      <li><a class="link" href="#!">Contact Details</a></li> 
     </ul> 

    </div> 

</div> 

查看完整JS提琴在這裏：http://jsfiddle.net/mrnaysilva/7A5qe/

我相信此刻正在發生的事情是，當我將鼠標懸停在「信用卡」選項，當我將鼠標懸停在「在線預訂」上時，它正在初始下拉菜單中生效 - 我不想發生這種情況。

關於如何解決這個問題的任何想法？ 卡

Answer 1

所以..你必須改變這個CSS：

#main-links-content .topnav li { 
    margin-left:0px !important; 
    /*padding-left: 10px;*/ 
    padding-right: 5px !important; 
    border-left: 1px solid #474747; 
    display: table-row; 
} 

#main-links-content ul ul ul { 
    left: 100%; 
    position: absolute; 
    top: 80px; 
    /*display: inline;*/ 
} 

Here it is working...

Answer 2

你必須改變你的風格下拉菜單：

#main-links-content ul ul ul { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    /*display: inline;*/ 
} 

Here is a working JSFiddle我顯示此行爲應用。