hover changing id specific division - html

Question

This is a solution-way question to another question I asked before (Open 100% width Navigation on hover over navigation item)
I am trying to build a navigation bar that shows more in depth search terms as soon as you hover over the respective navigation bar item.
Now I think I am close to a solution: I created this separate div that should be visible as soon as one hovers over "Produkte" / #navigation-item2. Now with the way I am acustomed to :hover this does not work. How can I make this work?
.navigation {
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
position: relative;
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0;
}
#navigation-item2:hover #nav-menu2 {
opacity: 1
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
<div class="nav-menu" id="#nav-menu2">
<ul class="dropdown">
<li>
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
</header>

Answer 1

What #navigation-item2:hover #nav-menu2 means, is that it targets the child element #nav-menu2 when the parent #navigation-item2 is hovered.
What you need to do is to move the #nav-menu2 inside the nav-tag, because you can only target siblings (with + or ~) or child elements.
I moved #nav-menu2 so it's directly follows the relevant a tag. Then you can use #navigation-item2:hover + #nav-menu2 to increase the opacity to 1.
By positioning every single sub-menu in the same order in the DOM, you can even go a step further, which I show-case in the code below, using only the classes.
For the sake of demonstration, I changed the #nav-menu2 to a starting opacity of 0.1. I also positioned #nav-menu2 to align at the bottom of .navigation (hence, adding position: relative to .navigation), and then translated it's full height (100%) to have the #nav-menu2 position itself under the navbar.
I would even go one step further and place #nav-menu2 inside #navigation-item2, so you automatically get the correct x-position. It would also solve the issue that you look the hover state if you got outside the .navigation-item. But I leave that up to you to figure out.
.navigation {
position: relative; /* ADDED */
width: 100%;
height: auto;
max-height: 20vh;
background: white;
display: flex;
;
align-items: center;
justify-content: center;
}
.navigation-item {
height: 10%;
width: 15%;
font-size: 1.2em;
color: black;
font-weight: bold;
padding: 0.5em 1em 0.5em 1em;
margin: 0px 1% 0px 1%;
text-align: center;
text-transform: uppercase;
transition: background 200ms linear;
text-decoration: none;
}
.navigation-item:hover {
background: lightgrey;
}
.nav-menu {
height: 200px;
bottom: 0px; /* ADDED */
transform: translateY(100%); /* ADDED */
position: absolute;
width: 100%;
max-height: 25vh;
opacity: 0.1; /* CHANGED */
}
.navigation-item:hover + .nav-menu { /* CHANGED */
opacity: 1;
}
<header>
<nav class="navigation">
<a href="https://www.amazon.com" style="flex: 0.5; margin-left: 20px">
<img src="/images/Logo.png" alt="Logo" style="height:100%; width:auto; max-height: 16vh; margin-top: 3px;">
</a>
<a class="navigation-item" href="https://www.amazon.com">
Home</a>
<a class="navigation-item" href="https://www.amazon.com">
Portfolio</a>
<a class="navigation-item" id="navigation-item2" href="https://www.amazon.com">
Produkte</a>
<div class="nav-menu" id="nav-menu2">
<ul class="dropdown">
<ul>
<li>Kochmesser</li>
<li>Küchenmesser</li>
</ul>
<li>Scheren</li>
<li>Klingen</li>
</ul>
</div>
<a class="navigation-item" href="https://www.amazon.com">
Über uns</a>
</nav>
</header>