Bootstrap Horizontal Drop Down menu - html

Question

I am trying to have Horizontal drop-down menu like one in here flipkart.com they have floating sidebar menu on hover.
This is my try [With Responsive Design]:-
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>
and here is my 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/
Any help would be great.
Thanks

Answer 1

If you add some sort of class to the list items that have dropdowns, then you can use the css :hover selector to open up the menu with css such as:
li.dropdown:hover .dropdown-menu {
display:block;
}
Here's an edited version of your code, but obviously you'll have to style it so there's no gap causing the mouse to go outside of the <li> item.
http://jsfiddle.net/QSFPK/2/