jQuery/CSS - Навигационные ссылки Боковое меню

У меня есть меню горизонтальной навигации, когда вы наводите указатель мыши на «Онлайн-бронирование», оно сбрасывает меню с дополнительными параметрами. Когда я наводил курсор на раскрывающийся список «Кредитная карта», я хочу, чтобы меню отображалось в сторону (слева: 100%).jQuery/CSS - Навигационные ссылки Боковое меню

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/

То, что я считаю, что происходит в данный момент в том, что когда я наведите курсор мыши на опции «Кредитная карта», он вступает в силу первоначального падения, когда я навешиваю «Онлайн-бронирование» - чего я не хочу.

Любые идеи о том, как я могу это исправить? застрял

источник

2013-11-15 nsilva

Так .. Вы должны изменить этот 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...

источник

2013-11-15 12:11:35 Legionar

но это было не так ... –

Это должно быть в правой части подменю .. (К вашей правой стороне). –

Это все еще отображается слева? Я бы хотел, чтобы выпадающее меню, когда вы наводили указатель на «Онлайн-бронирование», выпадало, как это происходит, но тогда, когда вы наводите «Кредитную карту», это «слайд справа». Кажется, что выпадающее действие вступает в силу для всех дочерних элементов ul, когда я только хочу, чтобы это вступило в силу первого ul-ребенка. Я просто не знаю, как это решить. @Legionar – nsilva

Вы должны изменить свой стиль выпадающий:

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

Here is a working JSFiddle, что я показываю это поведение применяется.

источник

2013-11-15 12:17:25

Наведите указатель мыши на« Онлайн-бронирование ». Я хотел бы иметь« выпадающее меню », но, зависая над« Кредитной картой », я хотел бы анимировать право. Кажется, что эффект выпадающего эффекта вступает в силу для обеих анимаций, которые не то, что я хочу сделать (и не знаю, как исправить) @Leonardo R – nsilva

@nsilva: ahh .. вы хотели, чтобы все было правильно, хорошо, так что смотреть. – Legionar

jQuery/CSS - Навигационные ссылки Боковое меню

ответ

Смежные вопросы