Conflicting issues with position: relative; - html

Question

I recently edited the way a template was designed for MyBB. Fortunately, I made it exactly how I expected it to look, however, the navigation bar seemed broke. After trying to navigate, I realized that I could only click on the lower half of the navigation.
http://gyazo.com/99337bd5252b37e118ce119d5168bcf3
As you can see where I painted the red boxes is the only place where the link activation works. After about 2 hours I found out my problem was due to a "position: relative;". When I remove it, the navigation works fine but my panel div becomes moved all the way to the right and out of position.
<div class="main-bg">
<div class="main-width">
<a name="top" id="top"></a>
<div class="top-bar blue-texture"></div>
<div id="header">
<div id="panel">
{$welcomeblock}
</div>
<div class="logo" >
<img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" />
</div>
<hr class="hidden" />
</div>
</div>
</div>
<div id="container">
<div class="bg-img">
</div>
<hr class="hidden" />
<div class="menu blue-texture">
<span class="search">
<form action="search.php" method="post">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
<input type="submit" value="Go" class="search-button" title="Search the forums" />
</form>
</span>
<ul>
<li>Home</li>
<li>Tournaments</li>
</ul>
</div>
There is the complete code on how I have developed this. However, the problem is mainly in the CSS.
#header {
padding: 60px 0 85px;
height: 56px;
text-align: left;
position: relative;
}
#panel {
background: rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #07090b;
border-radius: 6px;
position: absolute;
top:0;
margin-top: 0px;
right: 0;
padding-top: 4px;
font-size: 12px;
padding-right: 12px;
padding-left: 12px;
height: 130px;
}
.menu {
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #174d7b!important;
height: 50px;
}
I can't find a way to fix the problem however, because there is no way to add position:relative; and make the navigation links still work as they are intended to.

Answer 1

Without actual link or a working snippet it would be hard to find the issue, but please try this css that may solve your problem:
.menu { width: 100%; }
.menu ul li a { display: inline-block; width: auto; float: left; }
Hope this helps