下拉菜单使列表项不对齐

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

Answer 2

我用你的 HTML 做了我自己的，你可以离开。

JsFiddle： https://jsfiddle.net/469knbfq/

HTML：

<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>

CSS：

#header{ background: #000; padding: 15px 0px; }
#menunav{  }
#top-menu{  }
ul{ display: inline; margin: 0px; padding: 0px 0px 0px 20px; }
li{ display: inline; margin: 0px 10px; }
a{ color: #FFF; font-size: 18px; text-decoration: none; }
.more-menu{ background : grey; margin: 0px 0px 0px 20px; padding: 0px; display: none; }

JS：

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

注意：我使用的是 JQuery

Answer 3

感谢您的反馈...实际上，我通过稍微调整 CSS 和 jQuery 来解决我自己的问题。更新代码见下文：

http://codepen.io/anon/pen/ZbzvGQ

HTML：

<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>

CSS：

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

.more-menu {
    background-color: #111111;
    display: none;
    position: absolute;
  float: clear;
    top: 35px;
    right: -32px;
    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;
}

JQUERY：

$('#topmenu-other, .more-menu').hover(
            function (){
                $('.more-menu').css('display','inline-block');
            },
            function (){
                $('.more-menu').delay(7500).queue(function(next){
                    $(this).css('display','none');
                    next();
                });
            }
        );

这会使 >> 符号在悬停时保持在​​原位，并在用户决定选择哪个选项时保持更多菜单显示一段时间。

再次感谢！ :)