Question

我正在尝试使用下拉菜单制作导航栏。我已经创建了导航栏并使用了bootstraps＆＃34; pull-left＆＃34;将它移到左边的类。但是我使用jQuery创建的下拉菜单现在也向左移动，因为HTML代码包含在标记为＆＃34;左拉＆＃34;的div中。我用Google搜索并尝试了几个小时的东西，但我找不到解决办法。

导航栏的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 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/

Answer 2

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

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

<强> Demo

导航菜单＆＃34;向左拉＆＃34;使用Bootstrap：子菜单也向左拉

2 个答案: