Question

我在网页中遇到了一个问题，我无法通过导航栏的下拉来正确定位......任何想法都错了吗？我的html和CSS在下面的链接中。在此先感谢：）

body {
    margin: 0;
    padding: 0;
    font-family: "Futura", sans-serif;
    background-color: #ffffff;
}


.drop{
    position: relative;
    display: inline-block;
}

.drop-content{
    display: none;
    position: absolute;
    z-index: 2;
}

.drop-content a {
    background-color: #696969;
    color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 2;
}

.drop-content a:hover {
    background-color: #797980;
    color: #000000;
    border: 1px solid;
    padding: 12px 16px;
    z-index: 2;
}

.drop:hover .drop-content {
    display: block;
}


.drop > li {
    display: inline-block;
    padding: 0 35px 0 35px;
}

.drop > li > a {
    font-size: 18px;
    text-decoration: none;
    color: #ffffff;
}


.nav {
    background-color: #696969;
    color: #ffffff;
    list-style: none;
    text-align: center;
    padding: 20px 0 20px 0;
}

.nav > li {
    display: inline-block;
    padding: 0 35px 0 35px;
}

.nav > li > a {
    font-size: 18px;
    text-decoration: none;
    color: #ffffff;
}

.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 0 10px 10px;
    background-color: #696969;
    text-align: center;
    color: #ffffff;
}

.footer > a{
    color: #ffffff;
}

.text:hover{
    background: #797980;
    color: #000000;
    padding: 20px 25px 21px 25px;
    border: 1px solid #000000;
}

    <!doctype html>
<html>
<head>

<title>GQFC</title>
<link rel="stylesheet" type="text/css" href="External.css"/>

</head>
<body>

<ul class = "nav">
    <li><a class = "text" href = "Home.html" value ="home">Home </a> </li>
    <li><a class = "text" href = "#" value ="quiz">Quiz </a> </li>
    <li><a class = "text" href = "#" value ="feedback">Feedback Form </a> </li>
    <li><a class = "text" href = "#" value ="gallery">Gallery </a> </li>
    <li><a class = "text" href = "#" value ="diagram">Diagram </a> </li>
    <li><a class = "text" href = "#" value ="shop">Shop </a> </li>
    <div class="drop">
    <li><a class = "text" href = "#" value ="shop">About Us </a> </li>
        <div class="drop-content">
            <a href="#">Gerald</a>
            <a href="#">Mohammad</a>
            <a href="#">Fatema</a>
            <a href="#">Chantel</a>
        </div>
    </div>
</ul>


<div class="footer">This page was created by <a href = "#" value = "editor">Q</a><!-- CHANGE NAME HERE AND MAKE A HYEPERLINK TO UR CV --></div>

</body>
</html>

Answer 1

在.drop-content类中，您应用了绝对定位，但如果需要，仍需要使用左/右/上/下调整位置。请记住，这将定位到.drop-content第一个相对定位的父级。在这种情况下.drop类。

.drop-content{
    display: none;
    position: absolute;
    z-index: 2;
    left:40px;
    top:40px;
}

修改上面的左/上值以获得您想要的效果，并根据需要调整宽度。上面的代码可以帮助您走上正确的道路。

有关绝对定位的其他信息，请阅读：http://www.w3schools.com/css/css_positioning.asp

下拉导航栏没有定位在网页中

1 个答案: