Question

我已尽我所能，并寻找了自己的具体情况。菜单工作正常。我只希望下拉列表与顶部的宽度相同。我知道这是一个填充问题，但是下拉列表位于UL内部，因此它保留了这些值。我感到难过。如果有人可以提供帮助，将不胜感激。这是下面的代码。我还创建了jsfiddle。

HTML：

max2

CSS：

 <ul class="livability-menu">
      <li class="livability">County Overview
        <div class="more">more >></div>
      </li><ul class="dropDown">
        <li><a class="livability-a" href="education.html">Education</a></li>
        <li><a class="livability-a" href="healthcare.html">Healthcare</a></li>
        <li><a class="livability-a" href="housing.html">Housing</a></li>
      </ul>
         </ul>

谢谢。

Answer 1

您有填充问题。

将* { outline: 1px dashed }添加到小提琴的顶部，您将立即看到.livability-menu类引起此问题。设置其padding: 0并根据您的需要调整元素和其他（子）类。

注意：虽然您的HTML可以正常运行，但从官方上来说，您不允许直接嵌套UL元素（ul> ul> ul）。嵌套UL元素的正确方法是将每个级别放在LI元素内（ul> li> ul> li> ul）。

Answer 2

Here是解决问题的JSFiddle的分支。

您只需要在padding: 0;上设置ul.livability-menu并将padding: 10px 15px;移到li.livability。

编辑：我还修复了不正确的ul嵌套。

Answer 3

使用padding:0代替ul.livability-menu {padding: 10px 15px;}

ul.livability-menu {
    display: block;
    height: 50px;
    padding:0;
    width: 100%;
    line-height: 2.5em;
    box-sizing: border-box;
    background-color: #0066CC;
}
.more {
    float: right;
    text-align: right;
    color: #ffffff;
}
ul.dropDown {
    width: 100%;
    box-sizing: border-box;
    list-style-type: none;
    position: relative;
    padding: 17px;
    font-size: 1.3em;
    visibility: hidden;
    top: 0px;
    z-index: 1;
    background-color: #0066CC;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
}
ul.livability-menu:hover .dropDown {
    list-style-type: none;
    visibility: visible;
    width: 100%;
    box-sizing: border-box;
    line-height: 3em;
    z-index: 1;
    background-color: #0066CC;
}
li.livability {
    font-size: 1.6em;
    color: #ffffff;
    list-style-type: none;
    background-color: #0066CC;
}
a.livability-a {
    text-decoration: none;
    color: #fff;
}
a.livability-a:hover {
    color: #EBF907;
}
a.livability-a:visited {
    text-decoration: none;
    color: #96D2F8;
}

<ul class="livability-menu">
      <li class="livability">County Overview
        <div class="more">more >></div>
      </li>
<li>
<ul class="dropDown">
        <li><a class="livability-a" href="education.html">Education</a></li>
        <li><a class="livability-a" href="healthcare.html">Healthcare</a></li>
        <li><a class="livability-a" href="housing.html">Housing</a></li>
</li>
      </ul>
         </ul>

注意！您的html无效...无法在ul中设置ul，除非将其包装在li中因此将第二个ul包裹在li

中

使下拉菜单的宽度与导航栏的宽度相同

3 个答案: