Html 如何使下拉菜单正确运行？

我试着做一个弹出到左边的下拉菜单，但不仅第一个内联下拉菜单弹出到左边，而且顶部没有与相应的元素对齐

下拉列表的其余部分相互重叠。不仅如此，我还希望“时刻”的宽度与下拉列表的宽度相同

HTML代码：

                 <nav class="submenu" id="submenu">
                <ul class="submenu">
                <li id="main"><a href="main-index.html" title="Main">Main</a></li>
                <li id="opinions"><a href="opinions.html" title="Opinion Page">Opinions</a></li>
                <li id="characters"><a href="table.html" title="Character Sheet">Characters</a></li>
                <li id="quotes"><a href="dl.html" title="Quotes">Quotes</a></li>
                <li id="moments"><a href="/" onclick="return false;" title="Crowning Moments">Moments</a>
                    <ul class="submenu">
                        <li id="funny_moment"><a href="funny.html" title="Moments of Funny">Funny</a></li>
                        <li id="tearjerker_moment"><a href="tearjerker.html" title="Moments of Tearjerker">Tearjerker</a></li>
                        <li id="awesome_moment"><a href="heartwarming.html" title="Moments of Heartwarming">Heartwarming</a></li>
                        <li id="heartwarming_moment"><a href="awesome.html" title="Moments of Awesome">Awesome</a></li>
                        <li id=""><a href="/" onclick="return false;" title="Other Moments">Other</a>
                            <ul class="submenu">
                                <li><a href="/" onclick="return false;" title="Fridge">Fridge</a>
                                    <ul class="submenu">
                                        <li id="fridge_logic"><a href="/" onclick="return false;" title="Fridge Logic">Logic</a></li>
                                        <li id="fridge_brilliance"><a href="/" onclick="return false;" title="Fridge Brilliance">Brilliance</a></li>
                                        <li id="fridge_horror"><a href="/" onclick="return false;" title="Fridge Horror">Horror</a></li>
                                        <li id="fridge_heartwarming"><a href="/" onclick="return false;" title="Fridge Heartwarming">Heartwarming</a></li>
                                    </ul>
                                </li>
                                <li><a href="/" onclick="return false;" title="Fuels">Fuel</a>
                                    <ul class="submenu">
                                        <li id="fuel_nightmare"><a href="/" onclick="return false;" title="Nightmare Fuel">Nightmare</a></li>
                                        <li id="fuel_nausea"><a href="/" onclick="return false;" title="Nausea Fuel">Nausea</a></li>
                                        <li id="fuel_fetishism"><a href="/" onclick="return false;" title="Fetishism Fuel">Fetishism</a></li>
                                    </ul>
                                </li>
                                <li><a href="/" onclick="return false;" title="Fails">Fail</a>
                                    <ul class="submenu">
                                        <li id="fail_nightmare"><a href="/" onclick="return false;" title="Nightmare Fail">Nightmare</a></li>
                                        <li id="fail_nausea"><a href="/" onclick="return false;" title="Nausea Fail">Nausea</a></li>
                                        <li id="fail_fetishism"><a href="/" onclick="return false;" title="Fetishism Fail">Fetishism</a></li>
                                    </ul>
                                </li>
                                <li id="scene"><a href="/" onclick="return false;" title="Scene">Scene</a></li>
                                <li id="awesome_music"><a href="/" onclick="return false;" title="Awesome Music">Awesome Music</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

---

要使“时刻”项与下拉列表的大小相同，您可能会执行以下操作：

#moments {
    width: 241px;
}

要消除重叠，可以向li元素添加一点边距：

ul.submenu li {
    display: inline;
    position: relative;
    margin-top: 3px;
}

---

还有Tuguldur对另一部分所说的话。

工作正常。但250px是静态的

.ul li ul{
   position: absolute;
   left: 250px;
}

---

替换您的

.ul li ul{}

样式。

我已修复弹出式调整，但仍存在选项元素宽度不相同的问题，下拉列表仍显示在顶部。我已经听了他们的话，但没有起作用。我甚至更新了上面的问题，包括一张新图片。将代码添加到jsfiddle.net，然后用链接回复，我将向您展示如何修复它。

.ul li ul{
   position: absolute;
   left: 250px;
}