html - <li> 元素在内部添加 div 时被关闭

Question

我正在制作导航菜单(标签)，单击时会下拉另一个(div)菜单。当时，出于测试目的，下拉菜单 (div) 始终可见。

---

一开始我添加了outer-bar分区:

.outer-bar {
  position: relative;
  display: block;
  z-index: 1;
  text-align: center;
  top: 55px;
  background-color: black;
  height: 60px;
  width: 100%;
}

然后，对于菜单，down-bar ( <ul> ) 元素:

.down-bar {
  list-style-type: none;
  font-size: 105%;
}

之后，对于导航按钮，我使用了 <label>里面的元素down-bar :

   <div class="outer-bar">
        <ul class="down-bar" style="list-style:hidden">
            <li>
                <label id="down-nav-1" class="down-nav">Knives <b class="caret_down">&#9660;</b></label>
            </li>

With only labels inside, the navigation buttons would work perfectly, but then i added the dropdown (`div`) menu inside `<li>`.

            <div class="mainsizer">
                <div class="dropdown-menus" id="dropdown-menu-1">
                    <a href=/?search=M9%20Bayonet&type=weapon class="Text1"><label class="m9_bayonet" style="width:30px;height:30px;position:absolute;top:5px;left:5px;cursor:pointer;"></label>M9 Bayonet</a>
                    <a href=/?search=Karambit&type=weapon class="Text1"><label class="karambit" style="width:30px;height:30px;position:absolute;left:5px;top:59px;cursor:pointer;"></label>Karambit</a>
                    <a href=/?search=Bayonet&type=weapon class="Text1"><label class="bayonet" style="width:30px;height:30px;position:absolute;left:5px;top:116px;cursor:pointer;"></label>Bayonet</a>
                    <a href=/?search=Butterfly%20Knife&type=weapon class="Text1"><label class="butterfly" style="width:30px;height:30px;position:absolute;left:5px;top:170px;cursor:pointer;"></label>Butterfly Knife</a>
                    <a href=/?search=Flip%20Knife&type=weapon class="Text1"><label class="flip" style="width:30px;height:30px;position:absolute;left:5px;top:225px;cursor:pointer;"></label>Flip Knife</a>
                    <a href=/?search=Falchion%20Knife&type=weapon class="Text1"><label class="falchion" style="width:30px;height:30px;position:absolute;left:5px;top:280px;cursor:pointer;"></label>Falchion Knife</a>
                    <a href=/?search=Gut%20Knife&type=weapon class="Text1"><label class="gut" style="width:30px;height:30px;position:absolute;left:5px;top:334.5px;cursor:pointer;"></label>Gut Knife</a>
                    <a href=/?search=Shadow%20Daggers&type=weapon class="Text1"><label class="shadow" style="width:30px;height:30px;position:absolute;left:5px;top:390px;cursor:pointer;"></label>Shadow Daggers</a>
                    <a href=/?search=Huntsman%20Knife&type=weapon class="Text1"><label class="huntsman" style="width:30px;height:30px;position:absolute;left:5px;top:444px;cursor:pointer;"></label>Huntsman Knife</a>
                    <a href=/?search=Bowie%20Knife&type=weapon class="Text1"><label class="bowie" style="width:30px;height:30px;position:absolute;left:5px;top:498.5px;cursor:pointer;"></label>Bowie Knife</a>
                </div>
            </div>
        </li>

幸运的是，它也工作得很好，但是第三个导航按钮 Rifles从其他导航按钮下拉。

请看结果here .

---

全 fiddle :

Here.

问题及可能的原因:

但问题原因似乎很明显，Rifles下拉 div 比其他的小。所以我认为它被降低是为了平衡下拉菜单之间的水平对称性。

---

如果这是问题的原因，那么我如何打破平衡并再次将标签放在同一行上？

如果这不是原因，那会是什么？我该如何解决？

谢谢!

Answer 1

在 li 上添加 vertical-align-top

.down-bar li {
    display: inline-block;
    margin-right: 2%;
    margin-top: 15px;
    vertical-align: top;
}