Html 下拉菜单全部向左对齐

我通过CSS创建了一个下拉菜单，但奇怪的是所有的下拉菜单都是左对齐的。我希望所有的下拉菜单都会出现在它们的父菜单下

HTML格式如下：-

<div id="menu">
        <ul>
          <li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages" class="ng-scope selected">
                <a href="" ng-click="goToPage($index)" class="ng-binding">Introduction</a>
                <ul>
                    <!-- ngRepeat: smenu in data.subMenu[$index].list --><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">Profile</a>

                    </li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">Background</a>

                    </li><li ng-class="{$index==currMenu}" ng-repeat="smenu in data.subMenu[$index].list" class="ng-scope">
                        <a href="" ng-click="goToPage($index)" class="ng-binding">What is KAM</a>

                    </li>
                </ul>
            </li>
            ...
    </div>

您可以在此处看到显示它的图像（图中显示的是“案例”下拉列表，它应该位于案例下，但已向左移动。“简介”子菜单也显示在同一位置）：-

---

尝试添加

#菜单ul li{position:relative；}

尝试添加

#菜单ul li{position:relative；}

看起来每个下拉列表都绝对位于0px:

left:0; /* Bring back on-screen when needed */

我建议将每一个相对于其父对象进行定位。

---

你可以考虑使用<代码>显示：没有< /COD>隐藏下拉，而不是将它们放置在屏幕上。

看起来你的每一个下落都是绝对在0px:

的位置。

left:0; /* Bring back on-screen when needed */

我建议将每一个相对于其父对象进行定位。

---

你可以考虑使用<代码>显示：NON/<代码>隐藏下拉，而不是将它们放置在屏幕上。

< P> <强>校正：< /强>

仔细看后，我的最后一个答案不太正确。这可能不是解决问题的最佳方法。但这是一种方式（或者说是在球场上）

在CSS中执行以下操作：

这里有一个演示：

---

更正：

仔细看后，我的最后一个答案不太正确。这可能不是解决问题的最佳方法。但这是一种方式（或者说是在球场上）

在CSS中执行以下操作：

这里有一个演示：

---

这是因为

左：0

定位和父li的位置默认为

静态

。Yo可以通过将其标记为相对来修复它，这样子ul的

left:0

将相对于父li

#menu ul li {
    display: inline-block;
    float: none;
    /*width: 20%;*/
    position:relative; /*Add this*/
}

#menu li:hover ul{ /* Display the dropdown on hover */
     /* Bring back on-screen when needed */
    left:0;
    padding:0; /*Add this if you are not using any reset*/
}

---

这是因为

left:0

定位和父li的位置默认为

静态

。Yo可以通过将其标记为相对来修复它，这样子ul的

left:0

将相对于父li

#menu ul li {
    display: inline-block;
    float: none;
    /*width: 20%;*/
    position:relative; /*Add this*/
}

#menu li:hover ul{ /* Display the dropdown on hover */
     /* Bring back on-screen when needed */
    left:0;
    padding:0; /*Add this if you are not using any reset*/
}

---

悬停时的左侧设置为0。最好将显示设置为无，直到将鼠标悬停在其上。在我看来，你悬停时的左边被设置为0。最好将显示设置为无，直到将鼠标悬停在其上。国际海事组织。