Question

我有一个小定位错误，并且我敢肯定这是一个简单的解决方法，但是在尝试了许多不同的边距和填充组合之后，我无法做到完美。问题是，我似乎无法将我的下拉菜单（footer-nav ul ul）悬停在#info上方，以使其向下移动10像素。如果我从#info下的css中删除了边距，它将在我需要的地方将footer-nav ul ul ul降低10px，但是它删除了黑框（条纹内容）和footer-nav之间的10px边距。有人知道怎么修这个东西吗？我非常感谢！没有你们的天才，我不知道该怎么办！

这是JS小提琴：https://jsfiddle.net/fe2zk4L8/19/

这是html：

    <header id="header">
    <div id="nav">
    <ul>
    <li id="projects">PROJECTS
    <ul>
    <li id="one"> <a href="one.html" target="_self">ONE</a> </li>
    <li id="two"> <a href="two.html" target="_self">TWO</a> </li>
    <li id="three"> <a href="three.html" target="_self">THREE</a> </li>
    <li id="four"> <a href="four.html" target="_self">FOUR</a> </li>
    </ul>
    </li>
    </ul>
    </div>
    </header>
    <div id="color">
    <div id="streaks-content">
    </div>  
    </div>

    <footer id="footer">
    <div id="footer-nav">
    <ul>
    <li id="info">INFO
    <ul>
    <li id="twitter">
    <a href="https://twitter.com/" target="_blank">TWITTER</a>
    </li>
    <li id="instagram">
    <a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a>
    </li>
    <li id="email">
    <a href="mailto:mail@mail.com">EMAIL</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </footer>

这是CSS：

    a {
    text-decoration: none;
    color: inherit;
    display: block;
    }
    #header {
    width: 100%;
    position: fixed;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 10;
    }
    #nav {
    width: 100%;
    background-color: #FFFFFF;
    }
    #projects {
    display: inline-block;
    padding-bottom: 10px;
    }
    #nav ul {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    list-style-type: none;
    text-align: center;
    margin: auto;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }
    #nav ul ul {
    width: 300px;
    list-style-type: none;
    font-weight: normal;
    display: none;
    }
    #nav ul li:hover>ul {
    display: block;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    }
    #one {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #one:hover {
    background-color: black;
    color: white;
    }
    #two {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #two:hover {
    background-color: black;
    color: white;
    }
    #three {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #three:hover {
    background-color: black;
    color: white;
    }
    #four {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #four:hover {
    background-color: black;
    color: white;
    }
    #footer {
    width: 100%;
    background-color: white;
    position: fixed;
    margin: 0px;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 11;
    }
    #footer-nav {
    width: 100%;
    }
    #info {
    display: inline-block;
    padding-top: 10px;
    }
    #footer-nav ul {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    list-style-type: none;
    text-align: center;
    margin: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    }
    #footer-nav ul ul {
    width: 300px;
    list-style-type: none;
    font-weight: normal;
    display: none;
    }
    #footer-nav ul li:hover>ul {
    display: block;
    position: absolute;
    bottom: 100%;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    }
    #twitter {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #twitter:hover {
    background-color: black;
    color: white;
    }
    #email {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #email:hover {
    background-color: black;
    color: white;
    }
    #instagram {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid black;
    color: #000000;
    background-color: white;
    }
    #instagram:hover {
    background-color: black;
    color: white;
    }
    #color {
    width: 100%;
    align-content: center;
    }
    #streaks-content {
    background-color: black;
    width: 300px;
    height: 1000px;
    display: block;
    margin: 0 auto;
    }

Answer 1

请添加以下规则#footer-nav ul li:hover>ul的CSS选择器padding-bottom: 0;

因此，您总共应该拥有：

#footer-nav ul li:hover>ul {
    display: block;
    position: absolute;
    bottom: 100%;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding-bottom: 0;
}

将下拉菜单降低10px

1 个答案: