Nav menu «pull left» using Bootstrap: подменю также потянуло влево

Question

Я пытаюсь создать навигационную панель с выпадающими меню. Я создал панель навигации и использовал bootstraps «pull-left» class, чтобы переместить ее влево. Но выпадающее меню, которое я создал с помощью jQuery, теперь также перемещено влево, так как код HTML содержится в div, помеченном как «pull-left». У меня есть googled и пробовал материал в течение нескольких часов, но я не мог найти решение.

HTML, для панели навигации

<div id = "nav"> 
    <div class = "container" > 
      <div class = "pull-left "> 
       <img class = "logo-image" src = "Logo2.png" /> 
      </div> 

      <ul class = "pull-left"> 
       <li class "logo"><a href = "#">Home</a></li> 
       <li><a href = "#">About</a></li> 
       <li> 
       <a href = "#">Projects</a> 
       <ul> 
        <li><a href = "#">Stealth Game </a></li> 
       </ul> 
       </li> 
       <li><a href = "#">Gallery</a></li> 
       <li><a href = "#">Tutorials</a></li> 
      </ul> 
      <ul class = "pull-right"> 
       <li> <a href = "#">Follow me</a></li> 
      </ul> 
    </div> 

CSS

#nav li{ 
    display:inline; 
    padding-right : 5px; 
} 

#nav ul ul { 
    display:none; 
    position:fixed; 
    z-index:999; 
} 

#nav li li { 
    float: auto; 
} 

#nav li a { 
    width:150px; 
    display: inline-block; 
    text-align:center; 
    color:#000; 
    margin-right:5px; 
    height:35px; 
    line-height:35px; 
    text-decoration:none; 
    font-size:80%; 
    border:1px solid #ccc; 
} 

#nav ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 



#nav li li a { 
    background:#EBE7E6!important; 
    text-align:left; 
    height:auto; 
    line-height:1; 
    width:150px; 
    padding:8px 20px 8px 22px; 
    border:1px solid #D0D0D0; 
    border-top:none; 
    margin-right:0; 
} 

И на JavaScript

$(document).ready(function() { 
    $("#nav li:has(ul)").hover(function(){ 
     $(this).find("ul").slideDown(); 
    }, function(){ 
     $(this).find("ul").hide(); 
    }); 
}); 

Так актуальная проблема в том, что в подменю, которое появляется Безразлично 't появляется в меню, из которого оно открыто, но также потянуто влево, так как я использовал этот класс начальной загрузки для перемещения моя панель навигации слева.

Answer 1

Две вещи решить эту проблему:

#nav li { 
    display:inline-block; 
    ... 
} 
#nav ul ul { 
    position:absolute; 
    ... 
} 

Demo

Answer 2

У вас есть:

#nav ul ul { 
    display:none; 
    position:fixed; 
    z-index:999; 
} 

position:fixed в подменю, вероятно, что дает вам позиционировании проблемы.

редактировать:

вы хотите использовать position: absolute вместо этого.

другое редактировать, установите position: relative на родителе LI, вам также потребуется установить дисплей, чтобы блокировать и потому, что они больше не являются встроенными элементами, которые вы хотите, чтобы плавать их остались:

#nav li{ 
    position: relative; 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

скрипки с этим работая: https://jsfiddle.net/DTcHh/