Wordpress Menus are not showing up correctly? - html

Question

I first just wanted to add custom menus to my wordpress site..!
I did add those but right now..There is some white space above the menus...which I want to remove that..But I am not really getting what to do?
Here is my Menu code :
<nav id="primaryNav" section="brandnav" data-endpoint="/component/load/xhr/">
<ul>
<li class="menu double" id="reviewsMenu" data-component="touchMenuHover">
<a class="menuHead" data-trigger="menu" href="reviews/index.html">Reviews</a>
</li>
<li class="menu double" id="newsMenu" data-component="touchMenuHover">
<a class="menuHead" data-trigger="menu" href="news/index.html">News</a>
</li>
<li class="menu double" id="videoMenu" data-component="touchMenuHover">
<a class="menuHead" data-trigger="menu" href="videos/index.html">Video</a>
</li>
<li class="menu single" id="howtoMenu" data-component="touchMenuHover">
<a class="menuHead" data-trigger="menu" href="how-to/index.html">How To</a>
</li>
<li class="menu" id="download">
<a class="menuHead" href="http://www.download.com/" data-user-action="legacy">Download</a>
</li>
</ul>
</nav>
also CSS code for menus is this :
li:hover {
height:59px;
}
#primary {
height: 59px;
font-size: 0.94118em;
position: relative;
background-color: #6895d9;
min-width: 980px;
}
#primary .menuWrapper {
font-size: 14px;
position: absolute;
top: 74px;
left: 0;
z-index: 5000000;
box-shadow: 0 3px 8px 3px rgba(0, 0, 0, 0.1);
background-color: #fff;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.2s ease, top 0.2s ease;
-moz-transition: opacity 0.2s ease, top 0.2s ease;
-o-transition: opacity 0.2s ease, top 0.2s ease;
transition: opacity 0.2s ease, top 0.2s ease;
}
#primary .menuWrapper a {
color: #768696;
display: block;
}
#primary .menuWrapper a:hover {
color: #ff8b00;
}
#primary .menuWrapper:after {
position: absolute;
content: "";
display: block;
background: url('http://cnet4.cbsistatic.com/fly/339-fly/bundles/cnetcss/images/sprites/main-s58cd57e9cc.png') 0 -1341px no-repeat;
left: 30px;
padding-top: 0;
top: -5px;
height: 5px;
width: 11px;
}
#primary .single nav {
padding-right: 10px;
float: left;
}
#primary .single nav:after {
background-color: #DBDBDB;
box-shadow: 2px 0 3px -3px rgba(0, 0, 0, 0.4) inset;
content: "";
display: block;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 10px;
}
#primary .double nav {
overflow: hidden;
}
#primary .double .navWrapper {
background: #DBDBDB;
box-shadow: 2px 0 3px -3px rgba(0, 0, 0, 0.4) inset;
float: left;
left: 180px;
position: relative;
width: 450px;
}
#primary .hed {
text-transform: uppercase;
margin-top: 0;
font-weight: 600;
}
#primaryNav a.menuHead {
color: #fff;
position: relative;
height: 59px;
line-height: 59px;
display: block;
}
#primaryNav .menu {
float: left;
position: relative;
padding: 0 20px;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.searchBar {
border-radius: 18px;
position: relative;
}
.searchBar input {
font-size: 16px;
background: none;
border: none;
width: 85%;
margin-left: 15px;
height: 30px;
padding-bottom: 0;
}
.searchBar button {
height: 15px;
width: 14px;
position: absolute;
top: 8px;
right: 15px;
border: none;
background: url('http://cnet4.cbsistatic.com/fly/339-fly/bundles/cnetcss/images/sprites/main-s58cd57e9cc.png') 0 -1158px no-repeat;
}
.searchBar {
box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.25) inset;
background-color: #ECECEC;
border: 1px solid #D9D9D9;
}
and live site link " http://www.huntedhunter.com/teqvibez/
so if you people can help please to determine that what is causing this white space to appear and how to remove that..?
waiting for your reply...!

Answer 1

EDIT:
redo: #primaryNav .menu { float:left};
add: #primaryNav {float:left};
Works for me!