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

Question

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

HTML:

 <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>

CSS:

ul.livability-menu {
    display: block;
    height: 50px;
    padding: 10px 15px;
    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;
}

提前致谢。

Answer 1

您的填充有问题。

将 * { outline: 1px dashed } 添加到 fiddle 的顶部，您会立即发现问题是由 .livability-menu class 引起的。根据您的需要设置其 padding: 0 并调整元素和其他（子）class。

注意：虽然您的 HTML 工作正常，但官方不允许您直接嵌套 UL 元素 (ul>ul>ul)。嵌套 UL 元素的正确方法是将每一层都放在一个 LI 元素中 (ul>li>ul>li>ul).

Answer 2

Here 是您的 JSFiddle 的一个分支，它解决了这个问题。

您只需在 ul.livability-menu 上设置 padding: 0; 并将 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

中

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

Make dropdown menu same width as navbar

html

css

drop-down-menu

responsive