Dropdown Menu Moves List Item Out Of Alignment - html

Question

I'm really pulling my hair out on this one...I have a dropdown menu which is hidden but displays when the user hovers over a list item. However, the list item gets shifted downward on hover, instead of staying put. Which makes the menu shift further down than I want.
My code: http://codepen.io/anon/pen/PPYKJg
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</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');
}
);
Any idea what's happening here? This is driving me crazy!

Answer 1

well all I could see is the .more-menu not diplaying right below the top menu so to fix that change the top property of the .more-menu class to this so to make the dropdown menu display right below the navigation menu
.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

I made my own out of your HTML you can go off of.
JsFiddle: https://jsfiddle.net/469knbfq/
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</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');
});
note: I am using JQuery

Answer 3

Thanks for the feedback...I actually wound up fixing my own problem by tweaking the CSS and the jQuery a bit. See below for the updated code:
http://codepen.io/anon/pen/ZbzvGQ
HTML:
<div id="header">
<nav id="menunav">
<ul id="top-menu">
<li id="topmenu-news" class="toplink">news</li>
<li id="topmenu-shows" class="toplink">info</li>
<li id="topmenu-help" class="toplink">help</li>
<li id="topmenu-rules" class="toplink">rules</li>
<li id="topmenu-about" class="toplink">about</li>
<li id="topmenu-other" class="toplink">»
<ul class="more-menu">
<li id="moremenu-blog" class="morelink">blog</li>
<li id="moremenu-stats" class="morelink">stats</li>
<li id="moremenu-terms" class="morelink">terms</li>
<li id="moremenu-privacy" class="morelink">privacy policy</li>
<li id="moremenu-volunteer" class="morelink">volunteer!</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();
});
}
);
This keeps the >> symbol in place when hovered over and also keeps more-menu displayed for a time while the user decides what option to choose.
Thanks again! :)