Html 导航菜单“；“向左拉”；使用引导：子菜单也向左拉

我正在尝试制作一个带有下拉菜单的导航栏。我已经创建了导航栏，并使用bootstraps“pullleft”类将其向左移动。但是我用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>

还有JavaScript

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

所以实际的问题是，出现的子菜单并没有出现在打开它的菜单下，但也被拉到了左侧，因为我使用这个引导类将导航栏移到了左侧

您有：

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

子菜单上的

position:fixed

，可能是导致定位问题的原因

编辑：

您想改用

位置：绝对

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

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

处理这个问题：
有两件事可以解决这个问题：

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

没有解决该问题。它仍然显示在“主页”按钮下而不是“项目”按钮下，因此它仍然被向左拉。很抱歉，它仍然没有解决问题。即使将两个位置都更改为您建议的位置，它仍会出现在主屏幕下抱歉，在我更新我的答案时，这里有一把小提琴：
#nav li {
    display:inline-block;
    ...
}
#nav ul ul {
    position:absolute;
    ...
}