Сложенные вкладки в выпадающем меню в navbar

Question

То, что я создаю, похоже на это. Я нашел это, исследуя stackexchange.

Однако я хочу, чтобы раскрывающийся список открывался при наведении курсора мыши. Я могу создать загрузочную навигационную панель с выпадающими окнами mouseover, но не могу добавить действие mouseover к приведенному выше примеру. Есть идеи?

<div class="dropdown"> 
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 
    Dropdown <span class="caret"></span> 
    </a> 


    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 

    <ul class="nav nav-tabs"> 
     <li class="active"><a data-target="#home" data-toggle="tab">Home</a>   </li> 
     <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
     <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="home">HOME asdfasdfsda</div> 
     <div class="tab-pane" id="profile">PROFILE asdfafas</div> 
     <div class="tab-pane" id="messages">MESSAGES asdfdas</div> 
    </div> 
    </ul> 
</div> 

http://jsfiddle.net/pv2Lc/7/

Answer 1

Как насчет этого?

http://jsfiddle.net/70ytg4yf/

HTML без изменений

Нет JS

CSS:

.dropdown:hover { 
    /* so that no mouseout is triggered when moving to the menu */ 
    padding-bottom: 5px; 
} 

.dropdown-menu { 
    /* move up since default is lower because of padding */ 
    margin-top: -5px; 
} 

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