I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this?

Question

<li><a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">CONTACT<span class="caret"></span></a>    
    </li>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>

Can someone please help me. everything in is from bootstrap's website. Heres the whole html file http://pastebin.com/YXsVPRhz

Answer 1

You're missing the data-target from the a.dropdown-toggle , and an id for the targeted ul .

For the a , add a data-target attribute which is the id of the ul :
data-toggle="dropdown" //sample name

For the ul , add an id:
id="dropdown" //sample name

so it should be:

<li><a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" data-target="dropdown-menu" aria-expanded="true">CONTACT<span class="caret"></span></a>    
    </li>
        <ul class="dropdown-menu" id="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>

Answer 2

Add the ul as a sibling of the anchor

<li>
    <a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">CONTACT<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</li>

Demo: Fiddle