Question

我真的把头发拉出来......我有一个隐藏的下拉菜单，但是当用户将鼠标悬停在列表项上时会显示。但是，列表项在悬停时向下移动，而不是保持不变。这使得菜单比我想要的更进一步。

<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-菜单没有在顶层菜单下面进行diplaying，所以要修复将.more-menu类的top属性更改为此以使下拉菜单显示在导航菜单的正下方

select

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

这可以保持＆gt;＆gt;当用户决定选择哪个选项时，当悬停在其上时符号就位，并且还保持更多菜单显示一段时间。

再次感谢！：）

下拉菜单将列表项移出对齐方式

3 个答案: