Сделать выпадающее меню такой же ширины, как и панель навигации

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

Здесь - вилка вашего JSFiddle, которая решает проблему.

Вам просто нужно было установить padding: 0; на ul.livability-menu и переместить padding: 10px 15px; в li.livability.

Редактировать: я также исправил неправильное вложение.

Answer 2

Используйте 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

Answer 3

У вас есть проблема с заполнением.

Добавьте * { outline: 1px dashed } к вершине скрипки, и вы сразу увидите, что ваш класс .livability-menu вызывает проблему.Установите его padding: 0 и настройте элементы и другие (дочерние) классы в соответствии с вашими потребностями.

ВНИМАНИЕ: хотя ваш HTML работает нормально, официально вам не разрешено вложить элементы UL напрямую (ul> ul)> мкл).Правильный способ вложения элементов UL - поместить каждый уровень в элементы LI (ul> li> ul> li> ul).