html - 下拉菜单将列表项移出对齐

Question

我真的在这个问题上大惊小怪...我有一个下拉菜单，该菜单是隐藏的，但会在用户将鼠标悬停在列表项上时显示。但是，列表项在悬停时向下移动，而不是保持不变。这使得菜单比我想要的更靠下。

我的代码:http://codepen.io/anon/pen/PPYKJg

<div id="header">
    <nav id="menunav">
        <ul id="top-menu">
            <li id="topmenu-news" class="toplink"><a href="news.html" target="_blank">news</a></li>
            <li id="topmenu-shows" class="toplink"><a href="shows.html" target="_blank">info</a></li>
            <li id="topmenu-help" class="toplink"><a href="sorry.html" target="_blank">help</a></li>
            <li id="topmenu-rules" class="toplink"><a href="rules.html" target="_blank">rules</a></li>
            <li id="topmenu-about" class="toplink"><a href="about.html" target="_blank">about</a></li>
            <li id="topmenu-other" class="toplink"><a href="#" target="_blank">&#187;</a>
                <ul class="more-menu">
                    <li id="moremenu-blog" class="morelink"><a href="blog.html" target="_blank">blog</a></li>
                    <li id="moremenu-stats" class="morelink"><a href="blog.html" target="_blank">stats</a></li>
                    <li id="moremenu-terms" class="morelink"><a href="tos.html" target="_blank">terms</a></li>
                    <li id="moremenu-privacy" class="morelink"><a href="privacy.html" target="_blank">privacy policy</a></li>
                    <li id="moremenu-volunteer" class="morelink"><a href="volunteer.html" target="_blank">volunteer!</a></li>
                </ul>
            </li>
        </ul>   
    </nav>
</div>

html {
  overflow-y: scroll;
}

body {
    margin: 45px 0px; 
    text-align: center;
    background: #191919;
}

.header {
    color: #FE353D;
}

#top-menu {
    background-color:rgba(0,0,0,0.85);
    height: 34px;
    width: 49.1%;
    float: right;
    position: relative; 
    margin-top: 15px;   
    top: 21px;
    left: 88px;
    font: bold 20px sans-serif;
    border-top-left-radius: 10px;
    z-index: 10;
}

#top-menu:hover {

}

.more-menu {
    background-color: #111111;
    display: none;
    position: relative;
    top: 16px;
    right: 25px;
    height: 27px;
    width: 475px;
    font: bold 14px sans-serif;
  outline: 1px solid #000000;
    z-index: 11;
}

.toplink {
    margin-right: 35px;
}

ul {
    text-align: left;
    display: inline;
    list-style: none;
}

ul li {
    display: inline-block;
    position: relative;
    margin-right: 30px;
    padding-top: 5px;
}

ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

li.option {
    margin-left: -30px;
    margin-top: -25px;
}

$('#top-menu').hover(
  function (){
     $('.more-menu').css('display','inline');
  },
  function (){
     $('.more-menu').css('display','none');
  }
);

知道这里发生了什么吗？这让我发疯!

Answer 1

好吧，我所能看到的是 .more-menu 没有显示在顶部菜单的正下方，因此要修复此问题，请将 .more-menu 类的 top 属性更改为此，以便使下拉菜单显示在导航菜单的正下方

.more-menu {
    background-color: #111111;
    display: none;
    position: relative;
    top: 0px; /*this was 16px but is now 0px*/
    right: 25px;
    height: 27px;
    width: 475px;
    font: bold 14px sans-serif;
  outline: 1px solid #000000;
    z-index: 11;
}