jquery dropdown navigation link

jquery dropdown navigation link

I've been trying to use jquery as my dropdown all to no avail. The code below runs like a static href code that goes nowhere whereas the link in the anchor tag is valid. How can i get it to work?


Here's the Jquery code:
      function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
      var obj = this;
      obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            //return false;
              });
                     obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
            },
            getValue : function() {
          return this.val;
            },
            getIndex : function() {
                  return this.index;
      }
      }
      $(function() {
            var dd = new DropDown( $('.dd') );
      $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-3').removeClass('active');
      });
      });

And my Html code:
 <div id="" class="dd wrapper-dropdown-3" tabindex="1">
       <span>I want to</span>
        <ul class="dropdown">
              <li>@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })</li>
              <li>@Html.ActionLink("Company Information", "Details", "Employer", null, htmlAttributes: null)</li>
               <li>@Html.ActionLink("Post Opening", "Create", "Opening")</li>
               <li>@Html.ActionLink("View Opening", "Details", "Opening")</li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
       </ul>
</div>