html - 水平CSS导航问题

Question

您好，不知道为什么，但导航有问题。它似乎溢出了，如果我在一个浏览器中修复它，它会在另一个浏览器中失败。所以我不确定它有什么问题。最近 CSS 崩溃了，整个菜单都乱七八糟。

这里是网站的任何方式 http://www.otaku-plus.com/triton

已编辑:更新代码位:http://jsfiddle.net/yukimura/hqyY2/embedded/result/

这是菜单的 css 位

#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 位

<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>

有人能告诉我我的 CSS 有什么问题吗？或 HTML

Answer 1

我为您的问题提供了可能的解决方案。参见 this

#mainNav 向左浮动，#login 向右浮动。

我调整了你的标记。