Why is the ul with class "subnav" not bigger? - html

Question

The ul with class "subnav" should be bigger. I noticed it because the background color is only shown in a small area. If i hover nav ul li the "subnav" ul is not going out of the nav. Strangely the li a inside "subnav" are shown correct and are going outside the nav just fine.
Only when I give the "subnav" a specific height it will go outside the nav.
header {
background-image: url("../images/header.jpg");
background-size: cover;
background-position: 0 -15vh;
background-repeat: no-repeat;
height: 40vh;
display: flex;
align-items: flex-end;
}
nav {
width: 100%;
height: 10vh;
background-color: rgba(255, 255, 255, 0.75);
}
nav ul {
height: 100%;
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
align-items: center;
}
nav ul li {
position: relative;
}
nav ul li a {
color: #1b1a5c;
}
nav ul li .far {
margin-right: 0.5em;
color: #1b1a5c;
}
nav ul li .fas {
margin-right: 0.5em;
color: #1b1a5c;
}
#logo {
height: 100%;
}
#logo img {
max-height: 100%;
}
.subnav {
display: none;
position: absolute;
background-color: #b18e4a;
width: 80%;
transform: translateX(10%);
padding: 0.8em;
z-index: 1;
}
.subnav li {
margin: 0.4em;
}
.subnav li a {
color: white;
}
.subnav li a:hover {
color: #1b1a5c;
}
nav ul li:hover .subnav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
<header>
<nav>
<ul>
<li id="logo">
<img src="images/salonorchesterlogo.png" alt="Logo des Salonorchester Zürich Oberland">
</li>
<li><i class="far fa-calendar-alt"></i>Konzerte
<ul class="subnav">
<li>Kalender</li>
<li>Billette</li>
</ul>
</li>
<li><i class="far fa-newspaper"></i>News</li>
<li><i class="fas fa-info"></i>Über uns
<ul class="subnav">
<li>Orchester</li>
<li>Vorstand</li>
<li>Dirigent</li>
<li>Kontakt</li>
</ul>
</li>
</ul>
</nav>
</header>

Answer 1

The height: 100% property you are setting in the nav ul selector is targeting the top-level ul inside nav as well as your ul.subnav. You could either change the nav ul to nav > ul if you intend it to be specific only to the top-level ul or you could override that height in your .subnav block:
.subnav {
display: none;
position: absolute;
background-color: #b18e4a;
width: 80%;
transform: translateX(10%);
padding: 0.8em;
z-index: 1;
height: auto; /* ADD THIS TO OVERRIDE HEIGHT: 100% SET IN `nav ul` block */
}
You can see this in action in the snippet below:
header {
background-image: url("../images/header.jpg");
background-size: cover;
background-position: 0 -15vh;
background-repeat: no-repeat;
height: 40vh;
display: flex;
align-items: flex-end;
}
nav {
width: 100%;
height: 10vh;
background-color: rgba(255, 255, 255, 0.75);
}
nav ul {
height: 100%;
display: grid;
grid-template-columns: 3fr 1fr 1fr 1fr;
align-items: center;
}
nav ul li {
position: relative;
}
nav ul li a {
color: #1b1a5c;
}
nav ul li .far {
margin-right: 0.5em;
color: #1b1a5c;
}
nav ul li .fas {
margin-right: 0.5em;
color: #1b1a5c;
}
#logo {
height: 100%;
}
#logo img {
max-height: 100%;
}
.subnav {
display: none;
position: absolute;
background-color: #b18e4a;
width: 80%;
transform: translateX(10%);
padding: 0.8em;
z-index: 1;
height: auto; /* ADD THIS TO OVERRIDE HEIGHT: 100% SET IN `nav ul` block */
}
.subnav li {
margin: 0.4em;
}
.subnav li a {
color: white;
}
.subnav li a:hover {
color: #1b1a5c;
}
nav ul li:hover .subnav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
<header>
<nav>
<ul>
<li id="logo">
<img src="images/salonorchesterlogo.png" alt="Logo des Salonorchester Zürich Oberland">
</li>
<li><i class="far fa-calendar-alt"></i>Konzerte
<ul class="subnav">
<li>Kalender</li>
<li>Billette</li>
</ul>
</li>
<li><i class="far fa-newspaper"></i>News</li>
<li><i class="fas fa-info"></i>Über uns
<ul class="subnav">
<li>Orchester</li>
<li>Vorstand</li>
<li>Dirigent</li>
<li>Kontakt</li>
</ul>
</li>
</ul>
</nav>
</header>
For what it is worth, I would also revisit your decision to set the positioning to absolute and then use translateX to position the element, as opposed to just using some combination of top, left, right, and bottom. I don't know that there is anything explicitly wrong with that, but I wonder if you might get some unexpected behavior by mixing your intentions there.

Answer 2

Here try this. I gave your .subnav class the style height: auto;. Also I removed your padding and width styles.
.subnav {
height: auto;
display: none;
position: absolute;
background-color: #b18e4a;
/*transform: translateX(10%);*/
z-index: 1;
}

Answer 3

add the height to nav ul li:hover .subnav
nav ul li:hover .subnav {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
height: 150px
}