PHP - menu responsive se desarma en wordpress

Hola

Tengo un problema con un menu responsive, resulta que los descarguemodifique el css acondicionado al diseño de mi pagina esta en html (ejemplo está en http://www.alkomex.com/), ahora bien quiero ponerlo en mi plantilla wordpress y este se me desarma en el header.php

<h3><Div id="menu">

<nav id="nav" role="navigation"> <a href="#nav" title="Show navigation">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clearfix"><LI><?php wp_list_pages( 'title_li=&depth=2' ); ?>
</LI>
</ul>
</nav>
</Div>
</h3>

footer.php

<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/doubletaptogo.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url')?>/js/doubletaptogo.min.js"></script>
<?php wp_head();?>
<script type="text/javascript" src="<?php bloginfo('template_url')?>http://code.jquery.com/jquery-latest.min.js"></script>

css:
@charset "utf-8";
/* CSS Document */
a {
text-decoration: none;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#nav {
width: 920px; /* 1000 */
font-family: muli, 'Open Sans', sans-serif;
font-weight: 400;
left: 50%;
margin-left: auto; /* 30 480 */
margin-right: auto;
}
#nav > a {
display: none;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active {
background-color: #09C !important;
}
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */

#nav > ul {
height: 30px; /* 60 */
background-color: rgb(44,174,201);
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav > ul > li > a {
height: 100%;
font-size: 12px; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #069;
}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {
background-color:#069;
}
/* second level */

#nav li ul {
background-color: #069;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 12px; /* 20 */
border-top: 1px solid #03F;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
background-color: #0066CC;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */ {
#nav {
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */ {
html {
font-size: 50%; /* 12 */
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > a {
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #00e;
position: relative;
}
#nav > a:before, #nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after {
top: 60%;
}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
display: block;
}
/* first level */

#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid #09C;
}
/* second level */

#nav li ul {
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}


css div menu en header.php de wordpress:
}
#menu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
Preguntado hace 0 mins.