CODEWITHSUNDEEP
htmlcss
Jcfg.J
Jcfg.J

Reputation: 101

UL in DIV wont update height

When you hover over the navigation bar, the button should change color.

However, in my case, the button changes color, but it does not do such all the way to the bottom of the navigation bar (you can still see some gray under the black).

How do I make it so that it does go all the way to the bottom?

Also, for some reason, it will go all the way down in google chrome, but not in other browsers.

index.html

<div id ="nav">
<ul id = "navbar" class = "navigationbar">
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown1</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown3</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
    <li class = "dropdown">
    <a href="#" class="dropbtn">Not Dropdown</a>
    </li>
</ul>
</div>

and style.css

html { width:100%; height:100%; margin:0 padding:0;}
body { width:100%; height:100%; margin:0; padding:0; }

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:lightslategray;
min-width: 100%;
list-style: none;
display: inline-block;
height: 100%;
}

#nav li {
height:100%;
vertical-align: middle;
line-height: 300%;
list-style: none;
display: inline-block;
}

#nav{
width: 100%;
display:table;
margin:0 auto;
text-align: center;
background-color: lightslategray;
}

.dropdown a{
height: 65%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}

.dropbtn{
height: 100%;
display: inline-block;
font-family: "Palatino Linotype";
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;

}

.dropdown a:hover, .dropdown:hover .dropbtn {
background-color:black;
color: white;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
z-index: 20;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1; color: black;}

.dropdown:hover .dropdown-content {
display: block;
}

Upvotes: 0

Views: 417

Answers (1)

c2huc2hu
c2huc2hu

Reputation: 2497

I could replicate the error on Edge and Firefox. Make one of the following changes to ul.navbar. (Tested only in firefox).

  1. display: inline-block to display: block
  2. Add vertical-align: top or bottom
  3. Remove overflow: hidden

1 and 2 are from here: Remove Extra Space at Bottom of HTML List Item, I'm not sure why 3 works.

Upvotes: 1

Related Questions