CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
paul
paul

Reputation: 13471

Show another element with hover

I have this html code 

  <div class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement">
          <i class="fa fa-inbox icon-menu"></i>
                            1. Tab
                   </a>
          <ul class="dropdown-menu">
              <li>sub-step1</li>
          </ul>
    </div>

This is a Tab bar, and when I click on dropdown a menu is open (dropdown-menu) with subteps to pick up.

So far I achieve with hover than when a put the mouse over the dropdown the color change. But what I would like is that when I hover the dropdown the dropdown-menu will show without have to click.

Here my CSS:

 .dropdown:hover {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.dropdown-menu {
    width: 211px;
    border-color: #efefef;
    border-width: 3px;
    background-clip: padding-box;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: outside none none;
    margin: 0px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

What I read/try without success was to do this in the hover.

 .dropdown:hover + .dropdown-menu {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Can someone point me in the right direction please?

And another question. Once that I make the hover works. With this CSS code how can I do to open the dropdown-menu with an animation, let's say from top to bottom.

Upvotes: 2

Views: 3474

Answers (2)

Merlin
Merlin

Reputation: 4917

Try this

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

FIDDLE EXAMPLE

Upvotes: 1

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

You need to add the following CSS:

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

This will set .dropdown-menu to display: block; when .dropdown is hovered.

.dropdown {
    position: relative;
}
.dropdown:hover {
    background: linear-gradient(to bottom, #FCFCFC 0%, #efefef 30%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu {
    width: 211px;
    border-color: #efefef;
    border-width: 3px;
    background-clip: padding-box;
    background-color: #ffffff;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: outside none none;
    margin: 0px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
<div class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#" name="link_defineProcurement">
          <i class="fa fa-inbox icon-menu"></i> 1. Tab
    </a>
    <ul class="dropdown-menu">
        <li>sub-step1</li>
    </ul>
</div>

Upvotes: 1

Related Questions