导航栏未在网页中定位的下拉菜单

我正在为网页中的某个部分而挣扎，我无法获得导航栏的下拉菜单以正确定位。。。有什么想法吗？我的html和CSS在下面的链接中。提前感谢：）

https://jsfiddle.net/cgc1L17n/

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>

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

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

修改上面的左/上值以获得您想要的值，并在需要时调整宽度。上面的代码应该会让您走上正轨。

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

相关内容

最新更新

热门标签：