HTML Dropdown menu unwanted spacing

Question

I'm designing my own dropdown menu using CSS3/HTML and jQuery. I am having some issues though and I just can't seem to figure out why I am having the issue.

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

As you can see, when you hover over "Portfolio" there is a big gap just to the right and it pushes everything over. I can't seem to figure out why this is happening.

jQuery Code:

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

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

I know my css is messy and I can fix it up, it was just some quick code to test out my nav

Answer 1

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

delete this line

Answer 2

Unless you provide any more context about the project (are you just teaching yourself for fun?), I'd say, why re-invent the wheel?

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

Use Twitter's Bootstrap, pop in the desired component, and you'll have a nicely styled dropdown nav bar in less time than it took to post the question to SO!

[UPDATE BASED ON COMMENTS]

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>

I threw this fiddle together for you. Fairly clean and simple. Hope it points you in the right direction! :)