将鼠标悬停在仅显示下拉菜单上

Question

I am trying to build a dropdown menu. My problem is that hovering the content also shows the dropdown menu. I am currently using this code:

 /* actual dropdown menu */ #menu-hauptmenue { height: 45px; } .sub-menu { opacity: 0; background: #4d4d4d; display: block; z-index: 200; width: 250px; position: absolute; margin-top: 23px; } .sub-menu li { display: block; width: 250px; line-height: 2.7; padding: 10px 15px 10px 15px; z-index: 220; color: #fff; font-family: 'Roboto', sans-serif; font-size: 1em; } .sub-menu li a { color: #fff; font-family: 'Roboto', sans-serif; font-size: 1em; text-decoration: none; } .sub-menu li:hover { background-color: #333333; cursor: pointer; } .sub-menu a:hover { border-bottom: none; } #menu-hauptmenue li:hover .sub-menu { opacity: 1; } #billboard img { z-index: 1; } li { z-index: 20; } .clearfix:after { display: block; clear: both; } nav>ul>li { position: relative; } nav.open .sub-menu { padding-top: 0px; display: none; } /* styling of the nav */ nav ul { list-style: none; display: flex; flex-direction: row; justify-content: space-between; } nav ul li { display: inline-block; } nav ul li a { color: #4D4D4D; font-family: 'Roboto', sans-serif; font-size: 1em; text-decoration: none; } nav ul li a:hover { border-bottom: 1px solid #4D4D4D; } 

 <nav> <ul id="menu-hauptmenue"> <li><a href="#">Parent 1</a> <ul class="sub-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3</a></li> </ul> </li> <li><a href="#">Parent 2</a></li> <li><a href="#">Parent 3</a></li> </ul> </nav> 

As you can see, hovering the content below the navigation also displays the dropdown menu. It would be better to only display the navigation when hovering the parent li element, in this case 'Parent 1'. How can I achieve this the best way? Thank you for your advice.

Answer 1

It's because your element is present with 0 opacity so you are able to interact with it. You may try using display:none/block like this:

 /* actual dropdown menu */ #menu-hauptmenue { height: 45px; } .sub-menu { opacity: 0; background: #4d4d4d; display: none; width: 250px; position: absolute; margin-top: 23px; } .sub-menu li { display: block; width: 250px; line-height: 2.7; padding: 10px 15px 10px 15px; z-index: 220; color: #fff; font-family: 'Roboto', sans-serif; font-size: 1em; } .sub-menu li a { color: #fff; font-family: 'Roboto', sans-serif; font-size: 1em; text-decoration: none; } .sub-menu li:hover { background-color: #333333; cursor: pointer; } .sub-menu a:hover { border-bottom: none; } #menu-hauptmenue li:hover .sub-menu { opacity: 1; display:block; } #billboard img { z-index: 1; } li { z-index: 20; } .clearfix:after { display: block; clear: both; } nav>ul>li { position: relative; } nav.open .sub-menu { padding-top: 0px; display: none; } /* styling of the nav */ nav ul { list-style: none; display: flex; flex-direction: row; justify-content: space-between; } nav ul li { display: inline-block; } nav ul li a { color: #4D4D4D; font-family: 'Roboto', sans-serif; font-size: 1em; text-decoration: none; } nav ul li a:hover { border-bottom: 1px solid #4D4D4D; } 

 <nav> <ul id="menu-hauptmenue"> <li><a href="#">Parent 1</a> <ul class="sub-menu"> <li><a href="#">Dropdown 1</a></li> <li><a href="#">Dropdown 2</a></li> <li><a href="#">Dropdown 3</a></li> </ul> </li> <li><a href="#">Parent 2</a></li> <li><a href="#">Parent 3</a></li> </ul> </nav>