将下拉菜单降低 10px

Question

我有一点定位错误，我确信这是一个简单的修复，但在尝试了许多不同的边距和填充组合后，我无法完美解决。问题是当鼠标悬停在#info 上时，我似乎无法让我的下拉菜单 (footer-nav ul ul) 向下移动 10px。如果我从 #info 下的 css 中删除边距，它会将 footer-nav ul ul 向下放置 10px，但它会删除黑框（条纹内容）和页脚之间的 10px 边距-导航。有人知道怎么修这个东西吗？我非常感激！真不知道没有你们这些天才我该怎么办！

这是 JS Fiddle: 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

请添加到以下 CSS 选择器 #footer-nav ul li:hover>ul 该规则 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

Lowering the drop-up menu by 10px

html

css

margin

padding