Bootstrap Горизонтальное раскрывающееся меню

Question

Я пытаюсь иметь горизонтальное раскрывающееся меню, например, здесь flipkart.com у них есть плавное меню боковой панели при наведении указателя мыши.

Это моя попытка [С адаптивным дизайном]: -

JSFIDDLE Link - http://jsfiddle.net/QSFPK/

<div class="row-fluid"> 
<div class="span12"> 
<div class="span3"> 
<ul class="nav nav-tabs nav-stacked"> 
    <hr style="margin: -1px;"> 
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a> 
     <ul class="dropdown-menu rightMenu"> 
      <li><a id="logout" href="#">Sign Out</a></li> 
     </ul> 
    </li> 
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a> 
     <ul class="dropdown-menu rightMenu"> 
      <li><a id="logout" href="#">Sign Out</a></li> 
     </ul> 
    </li> 
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a> 
     <ul class="dropdown-menu rightMenu"> 
      <li><a id="logout" href="#">Sign Out</a></li> 
     </ul> 
    </li> 
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a> 
     <ul class="dropdown-menu rightMenu"> 
      <li><a id="logout" href="#">Sign Out</a></li> 
     </ul> 
    </li> 
    <li><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="menu">menu <span class="right-caret right"></span></a> 
     <ul class="dropdown-menu rightMenu"> 
      <li><a id="logout" href="#">Sign Out</a></li> 
     </ul> 
    </li> 
    <div class="clearFix"></div> 
</ul> 
</div> 
    <div class="span9"> 
     <h2>Hello World</h2> 
     <h2>Hello World</h2> 
     <h2>Hello World</h2> 
     <h2>Hello World</h2> 
     <h2>Hello World</h2> 
    </div> 
</div> 
    </div> 

и вот мой CSS: -

.rightMenu { 
    position:relative; 
    float:right; 
} 
.right-caret { 

    border-bottom: 4px solid transparent; 
    border-top: 4px solid transparent; 
    border-left: 4px solid #000000; 
    display: inline-block; 
    height: 0; 
    opacity: 1; 
    vertical-align: top; 
    width: 0;  
} 
.right { 
    float: right; 
} 

JSFIDDLE Link - http://jsfiddle.net/QSFPK/ Любым помощь будет отличной.

Благодаря

Answer 1

Если вы добавляете какой-то класс для элементов списка, которые имеют выпадающие, то вы можете использовать CSS: селектор парения, чтобы открыть меню с помощью CSS, такие как:

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

Вот отредактированная версия вашего кода, но, очевидно, вам придется стилизовать ее, чтобы не было зазора, заставляя мышь выйти за пределы элемента <li>.

http://jsfiddle.net/QSFPK/2/