CODEWITHSUNDEEP
htmlcssdrop-down-menuresponsive
Newsong80
Newsong80

Reputation: 109

Make dropdown menu same width as navbar

I've tried all I can think of and looked for my specific situation. The menu is working fine. I just want the drop-down to be the same width as the top. I know it is a matter of the padding, but the drop-down is inside the UL so it keeps those values. I am stumped. If anyone can help, it would be much appreciated. Here is my code below. I also created a 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;
}

Thank you in advance.

Upvotes: 0

Views: 929

Answers (3)

Rene van der Lende
Rene van der Lende

Reputation: 5281

You have a padding problem.

Add * { outline: 1px dashed } to the top of your fiddle and you will see immediately that your .livability-menu class causes the issue. Set its padding: 0 and adjust elements and other (child) classes in accordance with your needs.

ATTENTION: while your HTML works fine, officially you are not allowed to nest UL elements directly (ul>ul>ul). The proper way for nesting UL elements is to put each level inside a LI elements (ul>li>ul>li>ul).

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use padding:0 instead 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>

Note! Your html is invalid... You can not set ul inside ul without wrap it in li so wrap the second ul in li

Upvotes: 0

Wesley A. Pettyjohn
Wesley A. Pettyjohn

Reputation: 101

Here's a fork of your JSFiddle that solves the problem.

You just needed to set padding: 0; on ul.livability-menu and move padding: 10px 15px; to li.livability.

Edit: I also fixed the improper ul nesting.

Upvotes: 0

Related Questions