CSS - How to create dropdown menu

Question

I have created a dropdown menu. it works good, but there is a problem I am not able to solve on my own.

.dropdown-toggle ~ .dropdown-menu {
        display: block;
        opacity: 0;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
      }
      .dropdown-toggle:hover ~ .dropdown-menu {
        display: block;
        opacity: 1;
      }

<ul class="navbar-nav">
    	<li class="dropdown">
    		<a class="dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Test</a>
    		<div class="dropdown-menu"> 
    			<a class="dropdown-item" href="#">Test1</a> 
    			<a class="dropdown-item" href="#">Test2</a> 
    		</div>
    	</li>
    </ul>

If I mouseover the menu - it works if the mouse is over the dropdown-toggle class. If I mouseover the element from menu - the whole menu disappear.

I know i can change dropdown-toggle to dropdown but i want to activate the menu only if mouse is over the .dropdown-toggle, not the whole container.

Do you have any idea how to do this ?

Ref: "i want to activate the menu only if mouse is over the .dropdown-toggle, not the whole container". Isn't this exactly what's happening now? Could you make your question clearer? What do you call "container"? — tao
– tao, Commented Aug 6, 2018 at 22:46

Coral Kashri · Accepted Answer · 2018-08-06 22:52:44Z

1

All you have to do is to add another property in the css that will make the links displayed- when you hover over them with mouse:

.dropdown-toggle ~ .dropdown-menu:hover {
        display: block;
        opacity: 1;
        visibility: visible;
}

Another property that I added is to make sure that you will firstly hover over the main link and then hover over them with mouse, is:

.dropdown-toggle ~ .dropdown-menu {
        visibility: hidden;
}

When their visibility is hidden, you can't trigger the 'hover' css event on them.

.dropdown-toggle ~ .dropdown-menu {
        display: block;
        opacity: 0;
        -webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
      }
      .dropdown-toggle:hover ~ .dropdown-menu, .dropdown-toggle ~ .dropdown-menu:hover {
        display: block;
        opacity: 1;
        visibility: visible;
      }
      .dropdown-toggle ~ .dropdown-menu {
        visibility: hidden;
      }

<ul class="navbar-nav">
    	<li class="dropdown">
    		<a class="dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Test</a>
    		<div class="dropdown-menu"> 
    			<a class="dropdown-item" href="#">Test1</a> 
    			<a class="dropdown-item" href="#">Test2</a> 
    		</div>
    	</li>
    </ul>

edited Aug 6, 2018 at 22:52

answered Aug 6, 2018 at 22:41

Coral Kashri

3,5162 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tao Over a year ago

A simpler method to keep the menu open when hovered is to add .dropdown-menu:hover to .dropdown-toggle:hover ~ .dropdown-menu, without having to duplicate the declarations. But it looks like that's not the desired behavior, at least if the question is correctly formulated at this point.

tao Over a year ago

I think that's the intended behavior, too, as what the question seems to ask is already happening. Hopefully OP will clarify.

Collectives™ on Stack Overflow

CSS - How to create dropdown menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related