将下拉菜单降低 10 像素

Question

我有一点定位错误，我确信这是一个简单的修复，但是在尝试了许多不同的边距和填充组合之后，我无法做到完美。问题是我似乎无法让我的下拉菜单（footer-nav ul ul）通过将鼠标悬停在#info 上出现时向下移动 10px。如果我从#info 下的css 中删除边距，它会将footer-nav 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

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

所以，总的来说你应该有：

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