Bootstrap dropdown menu not displaying on mouseover / click

Question

Here's the HTML for the dropdown part:

<li class="dropdown">   
    <a class="dropdown-toggle" href="/contact-us">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a>
    <a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a> 
    <ul class="dropdown-menu">
        <li><a href="/contact-us/testpage">testpage</a></li>                        
        <li><a href="/contact-us/testpage2">testpage2</a></li>                          
    </ul>
</li>

It just looks like this:

Nothing happens when I mouseover it, and clicking it takes me to the contact us page.

I should have all the necessary JS files:

<script src="/js/plugins/jquery.1.11.0.js"></script>
<script src="/js/plugins/bootstrap.min.js"></script>
<script src="/js/plugins/bootstrap-dialog.min.js"></script>
<script src="/js/owl.carousel.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/validate.js"></script>
<script type="text/javascript" src="/js/plugins/sticky-tabs.min.js"></script>
<script src="/js/plugins/jquery.select2list.min.js"></script>

Not sure where I'm going wrong.

Edit - getting this error in console:

Not sure what's causing that though, there is no HTML in there

Answer 1

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Working fiddle https://jsfiddle.net/DTcHh/

Answer 2

There were few errors in your code.

1. You are not giving id to your button.

2. Missing data-toggle="dropdown" from button

3. You are not using aria-labelledby attribute in ul.

Checkout this snippet.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <li class="dropdown"> <a class="btn btn-default dropdown-toggle" id="dropdownMenu" data-toggle="dropdown">Contact Us <i class="fa fa-angle-down hidden-xs hidden-sm"></i></a> <a class="visible-xs visible-sm dropdown-menu-xs" href="#" data-toggle="dropdown"><i class="fa fa-angle-right"></i></a> <ul class="dropdown-menu" aria-labelledby="dropdownMenu"> <li><a href="/contact-us/testpage">testpage</a></li> <li><a href="/contact-us/testpage2">testpage2</a></li> </ul> </li>