导航栏菜单位置和悬停

Question

I'm currently having some difficulty getting my pop up navigation bar menu to stay in position above the button. When you change the size of the browser window for example you'll see the distance between the button and the menu increase and decrease. As if the menu is moving further up.

The other issue is when I hover around the <div class="menu"> above the button the menu pops up this is an issue, I'm trying to keep this function within the button only (Not above it).

Here is what I'm working with. I hope you can help, much appreciated.

 #btn-holder { background: rgba(255, 255, 255, 0.5); position: static; z-index: 10; bottom: 0; right: 0; left: 0; top: 0; } #btn-holder > .button { transform: translate(-50%, -50%); background-color: #a137a7; border: none; color: white; padding: 8px 13px; text-align: center; text-decoration: none; font-size: 16px; position: absolute; cursor: pointer; right: -1%; bottom: -1%; font-family: 'Source Sans Pro', sans-serif; opacity: .8; border-radius: 3px; } #btn-holder > .button:hover { background-color: #732878; color: white; } #btn-holder > .menu { opacity: 0; transition: opacity .5s; transform: translate(-50%, -50%); background-color: #a137a7; border: none; color: white; text-align: center; text-decoration: none; position: absolute; right: -1%; bottom: -16%; font-family: 'Source Sans Pro', sans-serif; } .menu a { display: block; color: white; text-align: center; padding: 8px 13px; text-decoration: none; font-family:'Source Sans Pro', sans-serif; opacity: 8; position:sticky; } .menu a:hover { background-color: #732878; } .menu > ul { list-style-type: none; margin: 0; padding: 0; top: 0; left: 0; right: 0; overflow: hidden; } .menu p { opacity: 1; margin: 0; } .menu p:after { content:""; display: block; height: 1px; vertical-align: bottom; border-top: 1px solid #eee; opacity: .4; } #btn-holder > .button:hover + .menu { opacity: 1; transistion-delay: 1s; } #btn-holder .menu:hover { opacity: 1; } 

 <div id="btn-holder"> <div class="button"> <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> </div> <div class="menu"> <ul> <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> <li><a href="/games"onclick="window.open(this.href, 'mywin', 'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> </ul> </div> </div> 

Answer 1

the problem is your menu is positioned absolutely, and has a percentage value. as the size of the window changes, the percentage value changes. If you want to use position absolute in this case, set an absolute value for bottom.

 #btn-holder { background: rgba(255, 255, 255, 0.5); position: static; z-index: 10; bottom: 0; right: 0; left: 0; top: 0; } #btn-holder > .button { transform: translate(-50%, -50%); background-color: #a137a7; border: none; color: white; padding: 8px 13px; text-align: center; text-decoration: none; font-size: 16px; position: absolute; cursor: pointer; right: 0; bottom: 0; font-family: 'Source Sans Pro', sans-serif; opacity: .8; border-radius: 3px; } #btn-holder > .button:hover { background-color: #732878; color: white; } #btn-holder > .menu { opacity: 0; transition: opacity .5s; transform: translate(-50%, -50%); background-color: #a137a7; border: none; color: white; text-align: center; text-decoration: none; position: absolute; right: 0; bottom: -61px; font-family: 'Source Sans Pro', sans-serif; } .menu a { display: block; color: white; text-align: center; padding: 8px 13px; text-decoration: none; font-family:'Source Sans Pro', sans-serif; opacity: 8; position:sticky; } .menu a:hover { background-color: #732878; } .menu > ul { list-style-type: none; margin: 0; padding: 0; top: 0; left: 0; right: 0; overflow: hidden; } .menu p { opacity: 1; margin: 0; } .menu p:after { content:""; display: block; height: 1px; vertical-align: bottom; border-top: 1px solid #eee; opacity: .4; } #btn-holder > .button:hover + .menu { opacity: 1; transistion-delay: 1s; } #btn-holder .menu:hover { opacity: 1; } 

 <div id="btn-holder"> <div class="button"> <img class="menu" src="http://static.tumblr.com/e2rgcy1/0wvod4uep/menu-drop-icon.png"></a> </div> <div class="menu"> <ul> <li><a href="/"a target="_blank"><img class="followtmblr" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li> <li><a href="/games"onclick="window.open(this.href, 'mywin', 'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="games" src="https://secure.static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> <li><a href="/"a target="_blank"><img class="blog" src="https://secure.static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li> <li><a href="/"a target="_blank"><img class="twit" src="https://secure.static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li> <li><a href="/"a target="_blank"><img class="fb" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li> </ul> </div> </div>