使用 Bootstrap 的导航菜单“向左拉”：子菜单也向左拉

Question

我正在尝试制作带有下拉菜单的导航栏。我创建了导航栏并使用引导程序“向左拉”类将其移动到左侧。但是我使用 jQuery 创建的下拉菜单现在也向左移动了，因为 HTML 代码包含在标记为“pull-left”的 div 中，我已经用谷歌搜索并尝试了几个小时，但我找不到一个办法。

导航栏的 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();
    });
});

所以实际的问题是，出现的子菜单不会出现在打开它的菜单下，但也被拉到左边，因为我使用这个引导类将导航栏移动到左边。

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。

另一个编辑，在父 LI 上设置 position: relative，您还需要将显示设置为阻塞，因为它们不再是内联元素，您需要将它们向左浮动：

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

摆弄这个工作：https://jsfiddle.net/DTcHh/