Показать еще один элемент с парении

У меня есть этот HTML кодПоказать еще один элемент с парении

<div class="dropdown"> 
     <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement"> 
      <i class="fa fa-inbox icon-menu"></i> 
          1. Tab 
        </a> 
      <ul class="dropdown-menu"> 
       <li>sub-step1</li> 
      </ul> 
    </div>

Это Tab бар, и когда я нажимаю на выпадающем списке меню открыто (выпадающее меню) с subteps, чтобы забрать.

До сих пор я достигаю с зависанием, чем когда наводил мышь на выпадающий цвет, меняя цвет. Но я бы хотел, чтобы при открытии выпадающего меню выпадающее меню отображалось без щелчка.

Вот мой CSS:

.dropdown:hover { 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
} 

.dropdown-menu { 
    width: 211px; 
    border-color: #efefef; 
    border-width: 3px; 
    background-clip: padding-box; 
    background-color: #ffffff; 
    border-radius: 0 0 7px 7px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
    display: none; 
    float: left; 
    font-size: 12px; 
    left: 0; 
    list-style: outside none none; 
    margin: 0px 0 0; 
    min-width: 160px; 
    padding: 5px 0; 
    position: absolute; 
    top: 100%; 
    z-index: 1000; 
}

То, что я прочитал/попробуйте без успеха в том, чтобы сделать это в подвешенном состоянии.

.dropdown:hover + .dropdown-menu { 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
}

Может кто-нибудь указать мне в правильном направлении, пожалуйста?

И еще один вопрос. После этого я делаю зависание. С помощью этого CSS-кода, как я могу сделать, чтобы открыть раскрывающееся меню с анимацией, скажем, сверху вниз.

источник

2015-05-03 paul

Вам нужно добавить следующий CSS:

.dropdown:hover .dropdown-menu { 
    display: block; 
}

Это установит .dropdown-menu в display: block; когда .dropdown наведен.

.dropdown { 
 
    position: relative; 
 
} 
 
.dropdown:hover { 
 
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
} 
 
.dropdown:hover .dropdown-menu { 
 
    display: block; 
 
} 
 
.dropdown-menu { 
 
    width: 211px; 
 
    border-color: #efefef; 
 
    border-width: 3px; 
 
    background-clip: padding-box; 
 
    background-color: #ffffff; 
 
    border-radius: 0 0 7px 7px; 
 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); 
 
    display: none; 
 
    float: left; 
 
    font-size: 12px; 
 
    left: 0; 
 
    list-style: outside none none; 
 
    margin: 0px 0 0; 
 
    min-width: 160px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    top: 100%; 
 
    z-index: 1000; 
 
}

<div class="dropdown"> 
 
    <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement"> 
 
      <i class="fa fa-inbox icon-menu"></i> 1. Tab 
 
    </a> 
 
    <ul class="dropdown-menu"> 
 
     <li>sub-step1</li> 
 
    </ul> 
 
</div>

источник

2015-05-03 07:29:48

работает как шарм !, благодаря – paul

я использую этот вопрос, чтобы спросить более 1 вещь не связаны между собой. Если вы знаете, как это сделать, было бы здорово, спасибо еще раз! – paul

@paul http://jsfiddle.net/ecnq2wpb/ - это один из способов его анимировать. –

Попробуйте это

.dropdown:hover .dropdown-menu { 
    display: block; 
}

FIDDLE EXAMPLE

источник

2015-05-03 07:30:05 Merlin

спасибо, что работает как шарм – paul

всегда приятно помочь – Merlin

Показать еще один элемент с парении

ответ

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