时间戳

首页 > 解决方案 > 使下拉菜单与导航栏宽度相同

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

问题描述

我已经尝试了所有我能想到的并寻找我的具体情况。菜单工作正常。我只希望下拉菜单与顶部的宽度相同。我知道这是填充问题，但下拉列表位于 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;
}

先感谢您。

标签： htmlcssdrop-down-menuresponsive

解决方案

你有一个填充问题。

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

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

推荐阅读