代码之家 › 专栏 › 技术社区 › Anderson

下拉菜单无法正常工作

submenu dropdown hover menu css

Anderson · 技术社区 · 6 年前

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>

.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/

2 回复 | 直到 6 年前

Itay Ganor 6 年前

这是因为你指定的悬停规则没有达到你希望的效果。

如果我悬停 .met_clean_list ,全部制作 ul 在它里面显示。

如果我在一个 li s、做以下事情 保险商实验室 看得见。

因此,你应该写 .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;
}

所以当你悬停在下拉菜单上时它不会消失。

Farid Vatani 6 年前

我希望这段代码对你有用

<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/