I recently created a menu button that looks great, but I noticed that when I shrink the browser window, it starts to move slightly upwards. It's really annoying and I can't figure out why this is happening. Can someone please help me troubleshoot this issue?
<div id="lines" onClick="return showMenu()" class="btn"></div>
#lines:hover {
background-color:#a2a2a2;
}
.btn {
position: relative;
margin-top:2%;
border: 2px solid #a5aaaa;
border-radius: 2px;
height: 36px;
width:36px;
float:right;
right:20px;
position:relative;
}
#lines:before {
border-bottom: 17px double #a5aaaa;
border-top: 6px solid #a5aaaa;
content:"";
height: 5px;
position: absolute;
right:3px;
top: 4px;
width:30px;
}