下拉菜單將列表項移至未對齊狀態

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菜單沒有在頂部菜單的正下方顯示，因此要進行修復，將.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制作了自己的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();
                });
            }
        );

當鼠標懸停在上方時，這將使>>符號保持在原位，並且在用戶決定選擇哪個選項時，還會在一段時間內顯示更多菜單。

再次感謝！ :)