下拉菜单将列表项移至未对齐状态
[英]Dropdown Menu Moves List Item Out Of Alignment
问题描述
我真的很想干这件事...我有一个下拉菜单，该菜单处于隐藏状态，但当用户将鼠标悬停在列表项上时会显示。 但是，列表项在悬停时会向下移动，而不是保持原样。 这使得菜单比我想要的还要向下移动。
我的代码： 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">»</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');
}
);
知道这里发生了什么吗？ 这真让我抓狂！
3 个解决方案
解决方案1
0 2015-08-27 20:33:51
好吧，我能看到的是.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;
}
解决方案2
0 2015-08-27 20:45:51
我用您可以使用的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">»</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
解决方案3
0 2015-08-28 04:04:55
感谢您的反馈...我实际上是通过稍微调整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">»</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();
});
}
);
当鼠标悬停在上方时，这将使>>符号保持在原位，并且在用户决定选择哪个选项时，还会在一段时间内显示更多菜单。
再次感谢！ :)
下拉菜单项将其他元素向右移动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.