HTML下拉菜单不需要的间距

Question

我正在使用CSS3/HTML和jQuery设计自己的下拉菜单。我有一些问题，但我似乎无法弄清楚为什么我有这个问题。

http://johns-webdesign.com/portfolioV2/

正如你所看到的，当你将鼠标悬停在“投资组合”有很大的差距只是在右边并将其推所做的一切。我似乎无法弄清楚为什么会发生这种情况。

jQuery代码：

<script type="text/javascript"> 
    $(document).ready(function(){ 

    $(".nav_link_port").mouseover(function(){$(".nav_link_temp").fadeIn('slow')}); 
    $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeIn('slow')}); 
    $(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeOut('slow')});  
    }); 
</script> 

HTML代码：

<div id="nav"> 
     <a href="#" class="nav_link">Home</a> 
     <a href="#" class="nav_link">About</a> 
     <a href="#" class="nav_link_port">Portfolio</a> 
     <a href="#" class="nav_link_temp">Templates</a> 
     <a href="#" class="nav_link">Contact</a> 
</div> 

CSS：

.nav_link { 
    display: block; 
    float:left; 
    font-family: 'Open Sans'; 
    font-size: 16px; 
    text-transform: uppercase; 
    background-color: #f7a70e; 
    color: #fff; 
    margin-right:5px; 
    text-decoration:none; 
    padding:15px; 
    position:relative; 
    z-index:100; 
     -webkit-transition: background 0.15s linear; 
     -moz-transition: background 0.15s linear; 
     -ms-transition: background 0.51s linear; 
     -o-transition: background 0.15s linear; 
     transition: background 0.15s linear; 
} 
.nav_link_port { 
    display: block; 
    float:left; 
    font-family: 'Open Sans'; 
    font-size: 16px; 
    text-transform: uppercase; 
    background-color: #f7a70e; 
    color: #fff; 
    margin-right:5px; 
    text-decoration:none; 
    padding:15px; 
    position:relative; 
    z-index:101; 
     -webkit-transition: background 0.15s linear; 
     -moz-transition: background 0.15s linear; 
     -ms-transition: background 0.51s linear; 
     -o-transition: background 0.15s linear; 
     transition: background 0.15s linear; 

} 
.nav_link_temp { 
    display:none; 
    float:left; 
    font-family: 'Open Sans'; 
    font-size: 16px; 
    text-transform: uppercase; 
    background-color: #f7a70e; 
    color: #fff; 
    margin-right:5px; 
    text-decoration:none; 
    padding:15px; 
    position:relative; 
    z-index:102; 
    top:52px; 
    left:-120px; 
     -webkit-transition: background 0.15s linear; 
     -moz-transition: background 0.15s linear; 
     -ms-transition: background 0.51s linear; 
     -o-transition: background 0.15s linear; 
     transition: background 0.15s linear;  
} 
.nav_link:hover { 
    background-color: #4f69a3; 
} 
.nav_link_port:hover,.nav_link_temp:hover { 
    background-color: #4f69a3; 
} 

我知道我的CSS是凌乱的，我可以修复它，它只是一些快速代码来测试我的导航

Answer 1

除非你提供有关项目（你只是教你自己开开玩笑吗？），我会说，为什么要重新发明轮子任何更多的环境？

http://twitter.github.com/bootstrap/components.html#navs

使用Twitter的引导，流行在所需的组件，你就会有比它采取张贴问题更少的时间一个很好的样式下拉导航栏SO！

[更新基于评论]

http://jsfiddle.net/jgaAg/

<ul id="navbar"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Portfolio</a> 
     <ul> 
      <li><a href="#">Templates</a> 
      </li> 
      <li><a href="#">Second Subitem</a> 
      </li> 
      <li><a href="#">Numero Tres</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a> 
    </li> 
</ul> 

我一起抛出此捣鼓你。相当干净和简单。希望它指出你在正确的方向！ :)

Answer 2

.nav_link_temp { 
    display:none; 
// float:left; 

删除这一行