CODEWITHSUNDEEP
csstwitter-bootstrap
Daniel Viglione
Daniel Viglione

Reputation: 9407

keep menu open on hovering over a link

I am using bootstrap 3 and I am trying to display a horizontal flyout menu when the user hovers over the link:

<div class="dropdown">
  <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension"></span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<style>
  .abcdef li {
      float: left;
  }

  #dropdownMenu1:hover + ul.dropdown-menu, ul.dropdown-menu:hover, ul.dropdown-menu li:hover  {
      display: block;
  }
</style>

When I hover over the link, the flyout menu does display horizontally. However, when I attempt to hover over one of the list items, the menu disappears. I want the menu to remain open so the user can click on one of the items.

I "display: block" for the dropdown over hovering various elements, but still the menu does not remain open.

Upvotes: 1

Views: 2157

Answers (3)

Morpheus
Morpheus

Reputation: 9055

Here is the CSS only solution. How it works: first you attach hover to the .dropdown div instead of the link itself and then using pseudo class create an invisible space between the link and the dropdown menu.

.dropdown:after {
      content: "";
      position: absolute;  
      bottom: -10px;
      height: 10px;
      width: 100%;
      left: 0;
      display: block;
}

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

Example

Upvotes: 2

Shannon Duncan
Shannon Duncan

Reputation: 178

Like @sherif said. Javascript is your friend here. Example: http://jsfiddle.net/scn9p2gu/2/

Html:

<div class="dropdown">
  <a class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="md-extension">hello</span>
  </a>
  <ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

CSS:

.abcdef li {
      float: left;
  }

.theclass {
    display: block;
}

JS:

$("#dropdownMenu1").hover(
    function() {
            $("ul.dropdown-menu").addClass("theclass");
            $("#dropdownMenu1").addClass("theclass");
            setTimeout(function(){ 
                $("ul.dropdown-menu").removeClass("theclass");
                $("#dropdownMenu1").removeClass("theclass"); 
            }, 3000);
    }
);

Upvotes: 0

Sherif Ahmed
Sherif Ahmed

Reputation: 1946

you can achieve this using js if you want ... DEMO

$(function () {
    $(".dropdown").hover(function () {
        $('.dropdown-menu', this).stop(true, true).fadeIn("fast");
        $(this).toggleClass('open');
    }, function () {
        $('.dropdown-menu', this).stop(true, true).fadeOut("fast");
        $(this).toggleClass('open');
    });
});

Upvotes: -1

Related Questions