制作多个水平子菜单

我正在尝试制作一个水平菜单，有几个水平子菜单。但代码不起作用：https://jsfiddle.net/5v9Ljrwy/制作多个水平子菜单

我认为#help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;}会使下一个子菜单可见。任何建议如何做到这一点？

<html> 
<head> 
<style> 

#help{ 
overflow:hidden; 
text-align:center; 
width:80%; 
background-color:#0066ff; 
} 

#help li{ 
list-style-type:none; 
float:left; 
padding:5px; 
margin:0px; 
} 

#help li ul {display: none;background-color:#abcdef;} 
//#help li:hover ul, #help li.hover ul {position: absolute;display: inline;width: 80%;left:0;} 

#help ul li:hover > li:first-child {position: absolute;display:inline;width: 80%;left:0;} 


</style> 
</head> 
<body> 



<p id="ShowHelp">I like</p> 
<nav id="help"> 
<ul> 

    <li>animals 
     <ul> 
     <li>Mammals 
      <ul> 

       <li>Elephant</li> 
       <li>Elephant</li> 
       <li>Elephant</li> 
      </ul> 

     </li> 
     <li>Fish</li> 
     </ul> 
    </li> 

    <li>cars 
     <ul> 
     <li>Ferrari</li> 
     </ul> 
    </li> 
<li>games</li> 
<li>other</li> 

</ul> 
</nav> 


</body> 

</html>

来源

2016-03-11 Ola Hansen

你可以去：

#help ul li:hover ul { 
    position: absolute; 
    display: inline; 
    width: 80%; 
    left: 0; 
}

但仍然需要子菜单的风格定位。

如果寻找一个干净的代码，开始时，你可能也想尝试：

HTML：

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Products</a> 
     <ul class="child"> 
      <li><a href="#">Hard Drives</a></li> 
      <li><a href="#">Monitors</a></li> 
      <li><a href="#">Speakers</a> 
       <ul class="child"> 
        <li><a href="#">10 watt</a></li> 
        <li><a href="#">20 watt</a></li> 
        <li><a href="#">30 watt</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Random Equipment</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Services</a> 
     <ul class="child"> 
      <li><a href="#">Repairs</a></li> 
      <li><a href="#">Installations</a></li> 
      <li><a href="#">Setups</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

CSS：

#nav {position: relative;} 
#nav li { 
    list-style:none; 
    float: left; 
} 
#nav li a { 
    display: block; 
    padding: 8px 12px; 
    text-decoration: none; 
} 
#nav li a:hover { 
    background-color:red; 
    color:#FFF; 
    opacity:1; 
} 

/* Targeting the first level menu */ 
#nav { 
    top:150px; 
    min-width:850px; 
    background:#fff; 
    opacity:0.5; 
    display: block; 
    height: 34px; 
    z-index: 100; 
    position: absolute; 
} 
#nav > li > a { 
} 

/* Targeting the second level menu */ 
#nav li ul { 
    color: #333; 
    display: none; 
    position: absolute; 
    width:850px; 
} 
#nav li ul li { 
    display: inline; 
} 
#nav li ul li a { 
    background: #fff; 
    border: none; 
    line-height: 34px; 
    margin: 0; 
    padding: 0 8px 0 10px; 
} 
#nav li ul li a:hover { 
    background-color:red; 
    color:#FFF; 
    opacity:1; 
} 

/* Third level menu */ 
#nav li ul li ul{ 
    top: 0; 
} 
ul.child { 
background-color:#FFF; 
} 
/* A class of current will be added via jQuery */ 
#nav li.current > a { 
    background: #f7f7f7; 
    float:left; 
} 
/* CSS fallback */ 
#nav li:hover > ul.child { 
    left:0; 
    top:34px; 
    display:inline; 
    position:absolute; 
    text-align:left; 
} 
#nav li:hover > ul.grandchild { 
    display:block; 
}

Codepen例如here.

来源

2016-03-11 11:37:26

为什么使用是件好事？胡佛效应不需要吗？ –

它不是，除非有链接。如果你喜欢，你可以放在那里，但是你必须更新CSS。但是无论如何都不能链接到任何地方。 –

制作多个水平子菜单

回答

相关问题