文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML/CSS下拉菜单:代码中的第二个列表项与第一个列表项重叠

问HTML/CSS下拉菜单:代码中的第二个列表项与第一个列表项重叠
EN

Stack Overflow用户
提问于 2016-02-02 05:26:33
回答 4查看 327关注 0票数 0

我正在使用HTML和CSS制作下拉菜单。菜单组件正在成功地下降，除了一个元素有两个或多个组件之外，一切看起来都很好。然后第二部涵盖第一部。我能够通过将“位置:绝对”放在"#nav ul li:悬浮ul“(下面的代码)中来解决这个问题，但是第一项没有清除菜单栏。

很抱歉描述得太糟糕了。

代码语言：javascript
复制
    <!DOCTYPE HTML>
    <html>
<head>
    <link type="text/css" rel="stylesheet" href="CSS/index.css" />
    <title>Index</title>
</head>
<body background="Images/Sun.jpg">
    <div class="center" id="main">
        <div class="center" id="header">
            <br/><p>JOSEPH T. IOSUE</p><br/>
        </div>
        <div class="center" id="nav">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">ABOUT ME</a></li>
                <li><a href="#">PROJECTS</a>
                    <ul>
                        <li><a href="#">PYTHON</a></li>
                        <li><a href="#">HTML/CSS</a></li>
                    </ul>
                </li>
                <li><a href="#" download>RESUME</a></li>
                <li><a href="#">CONTACT</a>
                    <ul>
                        <li><a href="#">joe.iosue@yahoo.com</a></li>
                        <li><a href="#">301-980-9525</a></li>
                    </ul>
                </li>
            </ul>               
        </div>
        <div style="background-color:white;clear:both;background-color:#00CCFF">
        </div>
    </div>
</body>
</html>

这是CSS

代码语言：javascript
复制
body {
    background-size: 100%;
    background-repeat: no-repeat;
}
#main {
    background-color: #00CCFF;
    width: 70%;
}
ul {
    list-style: none;
}
#header {
    width: 100%;
    background-color: blue;
    text-align: center;
}
#header p {
    font-size: 3vw;
    font-weight: bold;
}
#header * {
    margin: 0px 0px 0px 0px;
}
#nav {
    width: 100%;
}
#nav * {
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    font-size: 1vw;
    border: 0px 0px 0px 0px;
    background-color: #00CCFF;
}
#nav a {
    text-decoration: none;
    background-color: #00CCFF;
    padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
    position: relative;
}
#nav ul li a {
    color: white;
    font-weight: bold;
}
#nav ul li ul {
    display: none;
}
#nav ul li:hover ul {
    display: block;
    float: none;
    clear: both;
}    
#nav ul li:hover ul li a {
    position: absolute;
    background-color: #ff0000;
}
#nav ul li:hover ul li a:hover {
    background-color: #ff6666;
}
.center {
    margin: auto;
}
html
css
drop-down-menu
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-02-02 06:29:57

请检查下面的代码。我稍微修改了你的css。

​

代码语言：javascript
复制
body {
    background-size: 100%;
    background-repeat: no-repeat;
}
#main {
    background-color: #00CCFF;
    width: 70%;
}
ul {
    list-style: none;
}
#header {
    width: 100%;
    background-color: blue;
    text-align: center;
}
#header p {
    font-size: 3vw;
    font-weight: bold;
}
#header * {
    margin: 0px 0px 0px 0px;
}
#nav {
    width: 100%;
}
#nav * {
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    font-size: 1vw;
    border: 0px 0px 0px 0px;
    background-color: #00CCFF;
}
#nav a {
    text-decoration: none;
    background-color: #00CCFF;
    padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
    position: relative;
}
#nav ul li a {
    color: white;
    font-weight: bold;
}
#nav ul li ul {
    display: none;
    position: absolute;
    top:100%;
    left: 0;
    padding: 0;
    background-color: #ff0000;
}
#nav ul li:hover ul {
    display: block;
} 
#nav ul li ul li{
    background: none;
    float: none;
    display: block;
}
#nav ul li ul li a {
    display: block;
    float: none;
    background-color: #ff0000;
}
#nav ul li ul li a:hover {
    background-color: #ff6666;
}
.center {
    margin: auto;
}
代码语言：javascript
复制
<div class="center" id="main">
        <div class="center" id="header">
            <br/><p>JOSEPH T. IOSUE</p><br/>
        </div>
        <div class="center" id="nav">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="#">ABOUT ME</a></li>
                <li><a href="#">PROJECTS</a>
                    <ul>
                        <li><a href="#">PYTHON</a></li>
                        <li><a href="#">HTML/CSS</a></li>
                    </ul>
                </li>
                <li><a href="#" download>RESUME</a></li>
                <li><a href="#">CONTACT</a>
                    <ul>
                        <li><a href="#">joe.iosue@yahoo.com</a></li>
                        <li><a href="#">301-980-9525</a></li>
                    </ul>
                </li>
            </ul>               
        </div>
        <div style="background-color:white;clear:both;background-color:#00CCFF">
        </div>
    </div>

​

票数 1
EN

Stack Overflow用户

发布于 2016-02-02 05:40:30

请用这个替换整个css。

代码语言：javascript
复制
body {
    background-size: 100%;
    background-repeat: no-repeat;
}
#main {
    background-color: #00CCFF;
    width: 70%;
}
ul {
    list-style: none;
}
#header {
    width: 100%;
    background-color: blue;
    text-align: center;
}
#header p {
    font-size: 3vw;
    font-weight: bold;
}
#header * {
    margin: 0px 0px 0px 0px;
}
#nav {
    width: 100%;
}
#nav * {
    margin: 0px 0px 0px 0px;
    display: block;
    float: left;
    font-size: 1vw;
    border: 0px 0px 0px 0px;
    background-color: #00CCFF;
}
#nav a {
    text-decoration: none;
    background-color: #00CCFF;
    padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
    position: relative;
}
#nav ul li a {
    color: white;
    font-weight: bold;
}
#nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0;
    margin: 0;

}
#nav ul li:hover ul {
    display: block;
    float: none;
    clear: both;
}    
#nav ul li:hover ul li a {
background-color: #ff0000;
    float: none;
}
#nav ul li:hover ul li a:hover {
    background-color: #ff6666;
}
.center {
    margin: auto;
}

#nav ul li li {
    float: none;
}
票数 0
EN

Stack Overflow用户

发布于 2016-02-02 06:10:53

主下拉触发器应该是# main，下拉#nav和#header都有主父#main。设置#主位置:相对；并设置一个高度--假设50 as‘高:50 as；’然后设置#nav‘位置:相对；顶部: 100%;’并将#头的高度设为50 as作为#main。

代码语言：javascript
复制
    #main { position: relative; height: 50px; }
    #header, #nav { position: absolute; }
    #header { width: 100%; height: 100%; top: 0; left: 0; }
    #nav { top: 100%; left: 0; min-height: 100px; } /*set it to left or right 0*/

现在下拉列表应该在#main:hover #nav { display: block !important; }上触发，现在您必须按照您的需要对下拉列表进行样式设置。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/35145686

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档