Css Hover Drop Down Menu Disappears When Trying to Select Menu Option

css hover drop down menu disappears when trying to select menu option

You need to make sure the display:none; section is above the hover section (because its read top-down, you want priority appropriately), but also to have display:block; when hovering over the settingsMenu itself.

The code:

display: none;
width: 100%;

#menuContainer div:hover + #settingsMenu,#settingsMenu:hover{
display: block;
position: relative;
z-index: 100;

Here is a jsFiddle to show.

Drop down Menu Disappears when Selecting by Hovering over submenu

The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.

The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:

#menubar {  width: 880px;  height: 46px;}
ul#menu { float: right; margin: 0;}
ul#menu li { float: left; padding: 0 0 0 9px; list-style: none; margin: 1px 2px 0 0; background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a { font: normal 100% 'trebuchet ms', sans-serif; display: block; float: left; height: 20px; padding: 6px 35px 5px 28px; text-align: center; color: #FFF; text-decoration: none; background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a { height: 20px; padding: 6px 35px 5px 28px;}
ul#menu li.selected { margin: 1px 2px 0 0; background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a,ul#menu li.selected a:hover { background: #00C6F0 url(tab_selected.png) no-repeat 100% 0; color: #FFF;}
ul#menu li a:hover { color: #E4EC04;}
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; display: inline-block;}
.dropdown { position: relative; display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; z-index: 1; margin-top: 30px;}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;}
.dropdown-content a:first-child { padding-top:17px;}
.dropdown-content a:hover { background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block;}
<div id="main">  <div id="menubar">    <ul id="menu">      <li><a href="#">Home</a></li>      <li><a ref="#">Contact Us</a></li>      <li>        <div class="dropdown">          <a class="dropbtn">Dropdown</a>          <div class="dropdown-content">            <a href="#">Link 1</a>            <a href="#">Link 2</a>            <a href="#">Link 3</a>          </div>        </div>      </li>    </ul>  </div></div>

Drop-down menu disappears on hover

To prevent the menu from hiding as you try to hover over the link items, you need to add one more CSS rule with :hover that makes the menu visible when you are hovering over one of the links.

This can be done by adding the following CSS:

header>hide:hover + nav,
header>nav:hover {
display: block;

Note the header>nav:hover which I have added. That ensures that the nav element is visible when you hover over it.

Here's the link to updated fiddle: http://jsfiddle.net/gmeayqLy/1/

Dropdown menu disappears when mouse hovers

The reason its going disappearing is because you have a margin on the top of the hover box. When you hover the margin area it no longer thinks you are hovering the element. The simplest fix would be to either remove the margin on the top of your .dropdown element or adding an invisible box to bridge the gap between elements to would make it think it's still hovering the list item.

/* NAVBAR */
nav {
margin: 2vh 2%;

img#logo {
height: 7vh;

ul {
float: right;
list-style-type: none;
margin: 2.5vh 0;

ul li {
float: left;
display: inline-block;
margin-left: 50px; /*updated*/

nav a {
text-decoration: none;
color: var(--textgray);
font-size: 0.95em;

nav a:hover {
text-decoration: none;
color: #000;

ul.dropdown {
visibility: hidden;
position: absolute;
background-color: white;
width: 80px;
z-index: 1;
margin-top: 12px;
line-height: 0.6;
transition: all 500ms ease;/*added*/
opacity: 0;/*added*/

.dropdown > li {
padding-left: 12px;
margin: 12px auto;

.dropdown > li a:hover {
background-color: black;
display: block;
position: relative;
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
.dropdownbtn:hover .dropdown {
visibility: visible;
opacity: 1;/*added*/
display: block;

You can see it working here.

Drop Down menu disappears when mouse hover

Try to change

/*Display the dropdown on hover*/
nav#nav-main ul li a:hover + .hidden, .hidden:hover {
display: block;


/*Display the dropdown on hover*/
nav#nav-main ul li:hover ul{
display: block;

CSS: Drop Down menu disappear when I try to click on element from the displaying list

This will allow you to hover on the submenu if you move your mouse carefully to the submenu.

/* I added 'li' to the end of second rule and used !important 
to combat the style being overridden */

#menu li a:hover + .hidden li, .hidden:hover li {
display:block !important;

enter image description here


Related Topics

Leave a reply