使所有<li>宽度与最宽相同

Question

我有这个菜单设置为内联并有下拉菜单.
内心ul有背景.
每个下拉列表li都有一个:hover改变后台的背景li:

<div id="navMain">
    <ul>
        <li><a href="#nogo">Forside</a>
            <ul>
                <li><a href="#nogo">1111111111111</a></li>
                <li><a href="#nogo">Link 1-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Om Os</a>
            <ul>
                <li><a href="#nogo">Link 2-1</a></li>
                <li><a href="#nogo">Link 2-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Link 3</a>
            <ul>
                <li><a href="#nogo">Link 3-1</a></li>
                <li><a href="#nogo">Link 3-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
    </ul>
</div>

问题是,当其中一个子菜单li比其他子菜单长时,它只会扩展自己,而不是另一个子菜单li.
这导致:hover具有不同长度的效果.

那么我如何li在每个内部制作ul与最宽的相同的尺寸？

如果需要,您可以在这里找到CSS.

Answer 1

这里.请注意,我在菜单li中添加了一个类,并且我在css中添加了一个正文背景,因为我无法注意到你的菜单.最后,通过使li元素100%宽度来完成技巧

body {
  background-color: green;
}

.menu li {
  width: 100%
}

#navMain {}

#navMain ul {
  padding: 0;
  margin: 0;
  z-index: 2;
}

#navMain ul li {
  margin-right: 5px;
  text-align: center;
}

#navMain li a {
  display: block;
  text-decoration: none;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

#navMain li a:hover {
  background-color: black;
}

#navMain ul li:last-child {
  margin-right: 0px;
}

#navMain li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
}

#navMain ul ul {
  position: absolute;
  top: 20px;
  visibility: hidden;
  background-image: url(img/alphaBg.png);
}

#navMain ul li ul li {
  font-size: 12px;
  margin-right: 0px;
  text-align: left;
}

#navMain ul li ul li:first-child {
  padding-top: 5px;
}

#navMain ul li:hover ul {
  visibility: visible;
}