菜單取消隱藏後CSS子菜單不會顯示無javascript

我只想使用CSS，不使用JavaScript。當我將鼠標懸停在頂層菜單上時，我可以顯示子菜單，但只要取消頂層菜單中的子菜單，就會消失。我怎麼能解決這個問題，而不使用JavaScript？我錯過了什麼嗎？菜單取消隱藏後CSS子菜單不會顯示無javascript

我試圖使用.has-children:hover + .sub-menu {display: block;}來顯示子菜單，當我將鼠標懸停在頂層菜單上，但我不知道我可以編碼以保持可見的子菜單。

的HTML代碼是：

.header ul { 
 
    list-style: none; 
 
    padding: 20px 30px; 
 
} 
 
.header li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
.header li a { 
 
    padding: 20px 30px; 
 
} 
 
.menu { 
 
    clear: none; 
 
    float: right; 
 
    max-height: none; 
 
} 
 
.menu li ul { 
 
    position: absolute; 
 
} 
 
.sub-menu { 
 
    display: none; 
 
} 
 
.open-menu-link { 
 
    display: none; 
 
} 
 
.has-children:hover + .sub-menu { 
 
    display: block; 
 
}

<header class="header"> 
 
    <ul class="menu"> 
 
    <li><a href="#work">Work</a></li> 
 
    <li> 
 
     <a class="has-children" href="#about">Haschildren</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#link1">Child 1</a></li> 
 
     <li><a href="#link2">Child 2</a></li> 
 
     <li><a href="#link3">Child 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#careers">Careers</a></li> 
 
    <li> 
 
     <a class="has-children" href="#careers">About</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#link1">Child 3</a></li> 
 
     <li><a href="#link2">Child 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">end</a></li> 
 
    </ul> 
 
</header>

來源

2016-09-28 AleRef

打動你has-children類到li，然後讓你選擇：

.has-children:hover > .sub-menu

更新片段：

.header ul { 
 
    list-style: none; 
 
    padding: 20px 30px; 
 
} 
 
.header li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
.header li a { 
 
    padding: 20px 30px; 
 
} 
 
.menu { 
 
    clear: none; 
 
    float: right; 
 
    max-height: none; 
 
} 
 
.menu li ul { 
 
    position: absolute; 
 
} 
 
.sub-menu { 
 
    display: none; 
 
} 
 
.open-menu-link { 
 
    display: none; 
 
} 
 
.has-children:hover > .sub-menu { 
 
    display: block; 
 
}

<header class="header"> 
 
    <ul class="menu"> 
 
     <li><a href="#work">Work</a></li> 
 
     <li class="has-children"> 
 
     <a href="#about">Haschildren</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#link1">Child 1</a></li> 
 
      <li><a href="#link2">Child 2</a></li> 
 
      <li><a href="#link3">Child 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#careers">Careers</a></li> 
 
     <li class="has-children"> 
 
     <a href="#careers">About</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#link1">Child 3</a></li> 
 
      <li><a href="#link2">Child 4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">end</a></li> 
 
    </ul> 
 
    </header>

來源

2016-09-28 10:45:45 Pete

類has-children添加到李和使用李的懸停事件顯示子菜單。

.header ul { 
 
    list-style: none; 
 
    padding: 20px 30px; 
 
} 
 
.header li { 
 
    float: left; 
 
    position: relative; 
 
} 
 
.header li a { 
 
    padding: 20px 30px; 
 
} 
 
.menu { 
 
    clear: none; 
 
    float: right; 
 
    max-height: none; 
 
} 
 
.menu li ul { 
 
    position: absolute; 
 
} 
 
.sub-menu { 
 
    display: none; 
 
} 
 
.open-menu-link { 
 
    display: none; 
 
} 
 
.has-children:hover .sub-menu { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
</head> 
 

 
<body> 
 
    <header class="header"> 
 
    <ul class="menu"> 
 
     <li><a href="#work">Work</a> 
 
     </li> 
 
     <li class="has-children"><a href="#about">Haschildren</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#link1">Child 1</a> 
 
      </li> 
 
      <li><a href="#link2">Child 2</a> 
 
      </li> 
 
      <li><a href="#link3">Child 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#careers">Careers</a> 
 
     </li> 
 
     <li class="has-children"><a href="#careers">About</a> 
 
     <ul class="sub-menu"> 
 
      <li><a href="#link1">Child 3</a> 
 
      </li> 
 
      <li><a href="#link2">Child 4</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">end</a> 
 
     </li> 
 
    </ul> 
 
    </header> 
 

 
</body> 
 

 
</html>

來源

2016-09-28 10:45:56 Pugazh

菜單取消隱藏後CSS子菜單不會顯示無javascript

回答

相關問題