下拉菜单无法正常工作

Question

子菜单无法正常工作。它应该在悬停在特定项目上时出现，但它在悬停任何项目时出现

HTML

<div class="sty">
    <ul class="met_clean_list">
      <li><a href="#">Link 01</a></li>
        <ul>
          <li><b><a href="#">Sublink 01</a></b></li>
          <li><b><a href="#">Sublink 02</a></b></li>
        </ul>
      <li><a href="#">Link 02</a></li>
      <li><a href="#">Link 03</a></li>
    </ul>          
  </div>

CSS

.sty {
  background:#aaa;
  float:left;
  width:600px;
}


.sty ul li  {
  list-style:none;
  position:relative;
  padding:25px 10px;
  float:left;
}

.sty ul ul{
display:none;
}



.met_clean_list:hover ul {
 display:block;
 background:red;
}

https://jsfiddle.net/59opc6tj/119/

Answer 1

那是因为您指定的悬停规则没有按照您的意愿执行。

您写了：如果我将鼠标悬停在 .met_clean_list 上，则显示其中的所有 ul。

您想写的内容：如果我将鼠标悬停在其中一个 li 上，请使以下 ul 可见。

因此，你应该写.met_clean_list li:hover + ul

.sty {
    background: #aaa;
    float: left;
    width: 600px;
}

.sty ul li {
    list-style: none;
    position: relative;
    padding: 25px 10px;
    float: left;
}

.sty ul ul {
    display: none;
}

.met_clean_list li:hover + ul {
    display: block;
    background: red;
}

.sty ul ul:hover {
  display: block;
}

<div class="sty">
    <ul class="met_clean_list">
        <li><a href="#">Link 01</a></li>
        <ul>
            <li><b><a href="#">Sublink 01</a></b></li>
            <li><b><a href="#">Sublink 02</a></b></li>
        </ul>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
    </ul>
</div>

注意我还添加了：

.sty ul ul:hover {
    display: block;
}

因此，当您将鼠标悬停在下拉菜单上时，它不会消失。

Answer 2

希望这段代码对你有用
Html:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">Blog</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

css:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

演示： https://jsfiddle.net/faridvatani/54qypuds/

下拉菜单无法正常工作

Dropdown menu do not working correctly

css

menu

hover

submenu

dropdown