Выпадающее меню 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 Bootstrap, поп в нужном компоненте, и вы будете иметь хорошо стилизованную выпадающий нав бар за меньшее время, чем потребовалось, чтобы опубликовать вопрос 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; 

удалить эту строку