/* Reset et base 

    echo '<nav class="main-menu">';
    echo '<ul>';
    foreach ($menuItems as $item) {
        echo '<li>';
        echo '<a href="' . $item['link'] . '">' . $item['title'] . '</a>';
        if (!empty($item['submenu'])) {
            echo '<ul class="submenu">';
            foreach ($item['submenu'] as $subItem) {
                echo '<li><a href="' . $subItem['link'] . '">' . $subItem['title'] . '</a></li>';
            }
            echo '</ul>';
        }
        echo '</li>';
    }
    echo '</ul>';
    echo '</nav>';
*/
.main-menu { 
 position:relative;
 display:block;
 font-size:2rem;
 height:10%;
 padding:10px;
 text-decoration:none;
}
.main-menu a{
 text-decoration:none;
 color:black;
}  
.main-menu ul{
  display:flex;
  flex-direction:right;
  justify-content:space-between;
  position:relative;
  text-decoration:none;
  width:100%; 
  margin-left:20px;
  margin-right:20px;
  margin-bottom:30px; 
  background-color:var(--light_smoke); 
}

@media(min-width:490px) and (max-width:800px){
.main-menu ul {
  display:flex;
  color:red;
  flex-direction:column;
  justify-content:space-between;
}
}
.main-menu ul li{
   display:block;
   justify-content:space-between;
   text-decoration:none;
   background-color:var(--light_smoke);
   margin-left:20px;
   margin-right:20px;
}
.main-menu ul li >.submenu{
   display:none;
   text-decoration:none;
   background-color:var(--light_smoke);  
}
.main-menu ul li:hover .submenu{
    display:flex;
    flex-direction:column;
    color:black;
    background-color:rgba(0,0,0,1,0.7)
}
@media(min-width:490px) and (max-width:800px){
.main-menu ul li:hover .submenu{
    display:flex;
    flex-direction:column;
    color:red;
}
}
.main-menu ul li:hover .submenu li{
    background-color:var(--light_smoke);
    padding:5px;
    border-radius:2px;
}
.main-menu ul li:hover .submenu li:hover{
    background-color:light_smoke;
    color:red;
}