个人中心
gpt4 book ai didi

css - 制作几个水平子菜单

转载 作者：行者123 更新时间：2023-11-28 06:15:06 25 4
gpt4 key购买 nike

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

最佳答案

你可以选择:

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

关于css - 制作几个水平子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35939241/

25 4 0
文章推荐： html - 如何创建文本居中垂直对齐并自动换行的方形链接？
文章推荐： html - 自定义 CSS - 卡住了，我尝试了各种组合
文章推荐： javascript - 使用 cordova 插件在 phonegap 应用程序中显示一次启动画面
文章推荐： 多个字符串的 C++ 笛卡尔积