0

I have this HTML code for a dropdown. Here I am using bootstrap drop down menu.

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>

Now what I need is, when I hover over the "Export" item, the drop down should show as it is and at the same time the item should not be clickable. How can I do this ?

Rabin Lama Dong
  • 2,422
  • 1
  • 27
  • 33
  • checkout this question http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click i think it will help – medhatdawoud Oct 22 '16 at 16:47

1 Answers1

1

You can use javascript:void(0) with your "Export" Link like below code

<ul class="nav navbar-nav navbar-right">
    <li <?php if($tabs=='home' or $tabs=='') echo ' class="active"';?>><a href="<?php echo site_url('');?>">Home</a></li>   
    <li><a href="javascript:void(0)" onclick="LoadAddUser(); return false;">Add User</a></li>   
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Export </a>
        <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" onclick="LoadContactList(); return false;">Contact List</a></li>
            <li><a href="javascript:void(0)" onclick="LoadExportBox(); return false;">Email List</a></li>
        </ul>
    </li>   
    <li><a href="#">Logout</a></li>
</ul>
Jazzzzzz
  • 1,593
  • 15
  • 16