个人中心
gpt4 book ai didi

html - 下拉菜单问题

转载 作者：太空宇宙 更新时间：2023-11-03 20:41:24 25 4
gpt4 key购买 nike

伙计们，我无法理解为什么“选项二”的下拉列表没有正确显示，列表元素似乎都位于彼此之上，并且只在悬停时显示最后一个选项, 有什么想法吗？

http://jsfiddle.net/38pbvpx1/ 

        body {
        margin: 0;
    }
    header {
        position: relative;
        width: 80%;
        height: 80px;
        padding: 0;
        margin: 0 auto;
        background: #ff6;
        max-width: 1200px;
    }
    /* nav and submenu */
    nav {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: 80px;
        padding: 0;
        margin: 0;
    }
    nav ul {
        padding: 0;
        margin: 0;  
    }
    nav li {
        display: inline-block;
        zoom: 1;
        *display: inline;
        _height: 80px;
        list-style-type: none;
    }
    nav li a {
        display: block;
        height: 80px;
    }
    nav li a:hover {
        background: #448f69;
    }
        /* submenu navigation
        ---------------------------------------- */
        ul#menu, ul#menu ul.sub-menu {
            padding:0;
            margin: 0;
        }
        ul#menu li, ul#menu ul.sub-menu li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        ul#menu li {
            width: auto;
        }
        ul#menu li a, ul#menu li ul.sub-menu li a {
            width: auto;
            text-decoration: none;
            color: #000;
            padding: 0 15px;
            display: block;
            font-size: 16px;
        }
        ul#menu li {
            position: relative;
        }
        ul#menu li ul.sub-menu {
            display:none;
            postion: absolute;
            top: 80px;
            left: 0;
            width: auto;
        }
        ul#menu li:hover ul.sub-menu {
            display:block;
        }
        ul#menu li:hover ul.sub-menu li {
            position: absolute;
            display:block;
            width: 100%;
            background-color: #red;
        }
        ul#menu li:hover ul.sub-menu li a:hover {
            display:block;
            width: auto;
            color: #000;
            background-color: green;
        }
<body>
<header>
<nav>
  <ul id="menu">
    <li><a href="">Option One</a></li>
    <li><a href="">Option Two</a>
        <ul class="sub-menu">
            <li><a href="">Section A</a></li>
        <li><a href="">Section B</a></li>
        <li><a href="">Section C</a></li>
      </ul><!-- /.sub-menu -->
    </li>
    <li><a href="">Option Three</a></li>
    <li><a href="">Option Four</a></li>
  </ul><!-- /#menu -->
</nav>

最佳答案

在基本层面上，这是因为您已将所有 sbnmenu 的 li 绝对定位，因此它们彼此重叠。

这里使用的定位很奇怪，所以我稍微更新了一下。

JSfiddle

CSS

body {
    margin: 0;
}
header {
    position: relative;
    width: 80%;
    height: 80px;
    padding: 0;
    margin: 0 auto;
    background: #ff6;
    max-width: 1200px;
}


}
nav ul {
    padding: 0;
    margin: 0;
}
nav li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    _height: 80px;
    list-style-type: none;
    position: relative;
    vertical-align: top;
}
nav li a {
    display: block;
    height: 80px;
}
nav li a:hover {
    background: #448f69;
}
/* submenu navigation
    ---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, 
ul#menu ul.sub-menu li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#menu li {
    width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
    width: auto;
    text-decoration: none;
    color: #000;
    padding: 0 15px;
    display: block;
    font-size: 16px;
}
ul#menu li {
    position: relative;
}
ul#menu li ul.sub-menu {
    display:none;
    postion: absolute;
    top:100%;
    left: 0;
    width: auto;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
ul#menu li:hover ul.sub-menu li {
    //position: absolute;
    display:block;
    width: 100%;
    background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
    display:block;
    width: auto;
    color: #000;
    background-color: green;
}

关于html - 下拉菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25449329/

25 4 0
文章推荐： python - 使用Python将1562008049.727648转换为156200
文章推荐： opengl - 是否可以将 OpenCV GpuMat 绑定(bind)为 OpenGL 纹理？
文章推荐： visual-studio-2010 - 错误 : opencv2/core/core_c. h:没有那个文件或目录
文章推荐： javascript - 我的 table 的边框没有完全显示出来