Make bootstrap dropdown not Clickable

时间:2015-07-28 16:26:46

标签: html css twitter-bootstrap

I have it so that I the dropdown menu activates on hover with this:

/*Dropdown on Hover*/
.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

Here is my html code for the navbar:

<!-- Navigation -->
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
  <!-- Container makes the navbar extend across the whole screen, removing the default curved sides -->
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project Pandora</a>
    </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <% if defined?(Devise) %>
        <% if user_signed_in? %>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><%= link_to "Edit Account", edit_user_registration_path %></li>
              <li><a href="#">Do Something</a></li>
              <li class="divider"></li>
              <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Login", new_user_session_path %></li>
          <li><%= link_to "Sign Up", new_user_registration_path %></li>
        <% end %>
      <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div><!-- container-collapse -->
</nav>

How can I make it so that you can not activate the button on click so that it only opens on hover.

Thank you very much.

0 个答案:

没有答案