issues with creating dropdown in navbar <li> tag

gistfile1.txt

<ul class="nav nav-pills nav-justified">
        <li><a href=" {% url 'index' %} "><span class="glyphicon glyphicon-home"></span> Home</a></li>
        <li><a href=" {% url 'books' %} ">Services</a></li>
        <li><a href="  ">Students</a>
            
        </li>
        <li class="dropdown">
          <a href=" {% url 'staff' %} " class="dropdown-toggle" data-toggle="dropdown" role="button"  aria-haspopup="true" aria-expanded="false"> Staffs <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>


        <li><a href="  "> <span class="glyphicon glyphicon-earphone"></span> contact</a></li>


      </ul>
  </div>