Question

我正在尝试制作一个水平菜单，其中有几个水平子菜单。但代码不起作用：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>

Answer 1

你可以选择：

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

制作几个水平子菜单

1 个答案: