My dropdown menu don't work when i hover it - html

Question

Hello everyone when i hover the a tag i class dropdown dropmenu won't apear.
I try to change .dropdown by nav tag and it works but it works when i hover on the whole nav.
CSS :
.dropmenu {
display: none;
position: absolute;
text-align: center;
background-color: #fafafa;
margin-top: 20px;
width: 100%;
height: 100%;
}
}
.dropdown :hover: .dropmenu {
display: block;
}
HTML
<header>
<nav>
<div class="navleft"><h1>Morocco.</h1></div>
<div class="navmid">
<ul>
<li>
<div class="dropdown">
Decouvrir le Maroc
</div>
<div class="dropmenu">
<ul>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
</ul>
</li>
</div>
<li>Destination</li>
<li>Infos Pratique</li>
<li>Nous contacter</li>
</ul>
</div>
<div class="navright">
<img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt=""/>
</div>
</nav>
</header>
I try to replace .dropmenu by nav tag and it work but it work on the all navbar and not a only

Answer 1

You have errors on CSS and HTML
<header>
<nav>
<div class="navleft"><h1>Morocco.</h1></div>
<div class="navmid">
<ul>
<li>
<div class="dropdown">
Decouvrir le Maroc
</div>
<div class="dropmenu">
<ul>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
<li>Histoire</li>
</ul>
</div>
</li>
<li>Destination</li>
<li>Infos Pratique</li>
<li>Nous contacter</li>
</ul>
</div>
<div class="navright">
<img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg"
alt=""/>
</div>
</nav>
</header>
.dropmenu {
display: none;
position: absolute;
text-align: center;
background-color: #fafafa;
margin-top: 20px;
width: 100%;
height: 100%;
}
.dropdown:hover ~ .dropmenu {
display: block;
}
First: the <div class="dropmenu"> is not closing at the good place
Second: you have an extra bracket that you don't need in your CSS file
Three: the css is not good (the ~ is used to sibling "brothers" element)
I don't know if my english is good enough, but hope it will help you