How to create dropdown for <li> using bootstrap - html

Question

I need to make drop down for one <li> element
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
<li class="pull-right">More options
<ul class="dropdown-menu">
<li>one</li>
<li>two</li>
</ul>
</li>
<li class="pull-right">logout</li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
using Bootstrap v3.1.1
NOTE : even adding after jquery also doesn't works

Answer 1

You have to use
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
In your code, you miss class "dropdown" for li tag.
For correct dropdown, you have to use this sintax:
<li class="dropdown">
Item Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
The issue is causing by the missing of data-toggle="dropdown" in tag a

Answer 2

Maybe you search this solution: JSBin
For example:
You need add the content: attr(data-hover); on your before element.
HTML:
<li class="HOVER">More options
CSS:
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}

Answer 3

You're missing the the following attributes:
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
Sample markup below:
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Edit
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)