Question

我正在使用HTML和CSS制作一个下拉菜单。菜单组件成功下降，除了元素有两个或更多组件外，一切看起来都很好。然后第二个覆盖第一个。我能够通过在“#nav ul li：hover ul”（下面的代码）中添加“position：absolute”来解决这个问题，但是第一项不会清除菜单栏。

抱歉可怕的描述。

    <!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

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;
}

Answer 1

请检查以下代码。我稍微修改了你的CSS。

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;
}

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

Answer 2

请用这个替换你的整个CSS

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;
}

Answer 3

主下拉触发器应该是#main，下拉列表#nav和#header都有MAIN PARENT #main。设置#main＆＃39; position：relative;＆＃39;并设置一个高度让我们说50px＆＃39;身高：50px;＆＃39;然后设置#nav＆＃39; position：relative;顶部：100％;＆＃39; #header的高度为50px，为#main。

    #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; }上触发现在，您必须根据需要设置下拉列表的样式

Answer 4

修改以下css：

#nav * {
    display: inline-block;
    font-size: 1vw;
    margin: auto;
}
#nav ul li ul {
    display: none;
    padding: 0;
    position: absolute;
}
#nav ul li ul li {
    display: block;
}
#nav ul li:hover ul li a {
    background-color: #ff0000;
    display: block;
}

完整代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Index</title>
            <style>     
                body {
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                }
                #main {
                    background-color: #00ccff;
                    width: 70%;
                }
                ul {
                    list-style: outside none none;
                }
                #header {
                    background-color: blue;
                    text-align: center;
                    width: 100%;
                }
                #header p {
                    font-size: 3vw;
                    font-weight: bold;
                }
                #header * {
                    margin: 0;
                }
                #nav {
                    width: 100%;
                }
                #nav * {
                    display: inline-block;
                    font-size: 1vw;
                    margin: auto;
                }
                #nav a {
                    background-color: #00ccff;
                    padding: 1vw 3vw;
                    text-decoration: none;
                }
                #nav ul li {
                    position: relative;
                }
                #nav ul li a {
                    color: white;
                    font-weight: bold;
                }
                #nav ul li ul {
                    display: none;
                    padding: 0;
                    position: absolute;
                }       
                #nav ul li ul li {
                    display: block;
                }
                #nav ul li:hover ul {
                    clear: both;
                    display: block;
                    float: none;
                }
                #nav ul li:hover ul li a {
                    background-color: #ff0000;
                    display: block;
                }
                #nav ul li:hover ul li a:hover {
                    background-color: #ff6666;
                }
                .center {
                    margin: auto;
                }
            </style>
        </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>

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

4 个答案: