My header navigation seems fine at first glance, but why does it move when clicked? Any ideas on what could be causing this issue? All the code is valid and provided below. HTML
Here are some screenshots:
Before Clicking
After Clicking
HTML
<div id="wrapper-header">
<div id="logo" style="cursor:pointer" onclick="window.location='../'"></div>
<div id="wrapper-menu">
<ul class="menu">
<li><a href="../" class="current"><span class="cufon cufon-canvas" style="width: 54px; height: 22px;"><canvas width="66" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">home</span></span></a></li>
<li><a href="chair/"><span class="cufon cufon-canvas" style="width: 45px; height: 22px;"><canvas width="61" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">chair</span></span></a></li>
...
</li>
</ul>
...
<div class="shadow-down"></div>
</div>CSS
.wrapper-header{
width: 960px;
margin: auto;
position: relative;
height: 150px;}
...
.#btn-search-submit:hover{
background-position: 0 0;}