horizontal css navigation problem

Hello not sure wh开发者_如何学运维y but having some problem with a navigation. It seems to be overflowing and if I fix it in one browser it fails in the other. So I am not sure what is wrong with it. Recently the CSS broke and the entire menu is beyond messed up.

any ways heres is the site http://www.otaku-plus.com/triton

EDITED: updated code bit: http://jsfiddle.net/yukimura/hqyY2/embedded/result/

here is the css bit for the menu

#dropfish {
    background-attachment: scroll;
    background-clip: border-box;
    background: #111111 url("images/top-bar-bg.png");
    background-origin: padding-box;
    background-position: 0% 0%;
    background-repeat: repeat-x;
    background-size: auto;
    color: #000000;
    left: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    top: 0px;
    width: 100%;
    height: 44px;
    position: fixed;
    z-index: 9999;
    box-shadow:0px 1px 2px;
}

#dropfish_menu {
    width: 90%;
    height: 44px;
    margin: 0 auto;
}

#dropfish_menu ul { 
   width: 90%; 
   height: 44px;
} 

#dropfish_menu ul li { 
   float: left; 
   padding: 14px 0px; 
   margin-top: -1px;
} 

#dropfish_menu a {
    color: #ffffff;
    text-shadow:0 -1px 0 #000000;
    padding: 14px 16px;
    font-size: 14px;
} 

#dropfish_menu a:hover { 
    margin-top: 0px;
    padding: 14px 16px; 
    /* background-color:#cdcdcd; */
    background-repeat: repeat;
    background-color: #313131;
    background-image: url("images/top-bar-bg.png");
    background-position: 50% 75%;
    cursor: pointer;
} 

.active {
    background-color: #313131;
    background-image: url("images/top-bar-bg.png");
    background-position: 50% 75%;
}

html bit for the menu

<div id="dropfish"> 
<div id="dropfish_menu"> 
     <ul> 
     <div style="float:left;margin-left:-128px;"> 
     <li><img src="http://opcdn.otaku-plus.com/themes/plus/images/logo.png" height="34px" style="margin-top: -8px;margin-right: 8px; cursor: pointer;" id="phx_return_logo"/></li> 
     <li><a href="#!search.py" class="active" onclick="return: false;">Web</a></li> 
     <li><a href="#!anime.py" onclick="return: false;">Anime</a></li> 
     <li><a href="#!manga.py" onclick="return: false;">Manga</a></li> 
     <li><a href="#!news.py" onclick="return: false;">News</a></li> 
     <li><a href="#!events.py" onclick="return: false;">Events</a></li> 
     <li><a href="#!adv.py" onclick="return: false;">More</a></li> 
     </div> 
     <div style="float:right;margin-right:-128px;"> 
     <li><a href="#!register.py" onclick="return: false;" class="register">Register</a></li><li><a href="#!login.py" onclick="return: false;" class="signin">Sign in</a></li><li><a href="#!settings.py" onclick="return: false;" class="settings">Preferences</a></li>  
     </div> 
     </ul> 

</div>
</div>

can some one tell me what is wrong with my CSS? or HTML

I made a possible solution to your problem. See this

#mainNav is floating left and #login is floating right.

I adjusted your mark up.