[Résolu] Maintenir l'effet hover d'un item du menu... - ...tant que le sous-menu est déroulé en css par karvaneg - page 1

Bonjour à tous,

Je rencontre un problème...j'arrive bien à dérouler mon sous-menu, au passage de ma souris sur un item de mon menu et à changer l'aspect de cet item au passage de la souris sur lui mais quand je déplace ma souris dans le sous-menu, je voudrais que mon item du menu garde son apparence de hover. Le tout en css.

Menu non déplié

Menu déplié avec l'effet hover de l'item que je voudrais maintenir quand je déplace ma souris dans le sous-menu.

<nav id="header_secondpart_menu" role="navigation"          class="header-navigation" aria-label="main navigation">
                <div>
                    <ul class="menu_left" role="menubar_left">
                        <a href="{{ url('app_hotspots_home') }}" title="Accueil" aria-label="Page d'accueil">
                            <i class="fa-solid fa-house"></i>
                        </a>
                        <li class="header-navigation-item" role="none"><a href="#" role="menuitem">Présentation</a></li>
                        <li class="header-navigation-item" role="none"><a href="{{url('app_hotspots_carte')}}" role="menuitem">Cartographie</a></li>
                        <li class="header-navigation-item" role="none"><a href="#" role="menuitem">Actualités</a></li>
                        <div>
                        <li class="deroulant" role="none"><a href="#" role="menuitem" aria-expanded="false" aria-haspopup="true">Ressources</a>
                            <ul class="sous_menu" role="menu">
                                <li class="header-navigation-item" role="none"><a href="#" role="menuitem">Liste des espèces intégrées à l'étude</a></li>
                                <li class="header-navigation-item" role="none"><a href="#" role="menuitem">Téléchargements</a></li>
                                <li class="header-navigation-item" role="none"><a href="#" role="menuitem">Partenaires</a></li>
                            </ul>
                        </li>
                        </div>
                    </ul>
                </div>
                    <ul class="menu_right" role="menubar_right">
                        <li role="none"><a href="#" title="s'inscrire" role="menuitem">Newsletter</a></li>
                        <li role="none"><a href="{{url('app_hotspots_login')}}" title="se connecter" role="menuitem">Connexion</a></li>
                    </ul>
            </nav>

/*-------------------HEADER------------------------/
/-----------------BARRE MENU----------------------/
/-----------------------------------------------*/

#header_secondpart{
  background-color: #244b70;
  color: #f4f4f4;
}

#header_secondpart_menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
  //   position: relative;
  //  z-index: 100030;
  // display: flex;
  // align-items: center;
}

#header_secondpart_menu ul{
    display: flex;
    align-items: center;
    margin-right: 10px;
}

#header_secondpart_menu li{
  //  display: block;
    margin: 0;
    width:auto;
    height: 100%;
}

#header_secondpart_menu ul li a{
    display: block;
    margin: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    height: auto;
    padding: 13px;
}

#header_secondpart_menu ul li ul{
  display: none;
}

#header_secondpart_menu li ul {
  display: none;
}
#header_secondpart_menu li:hover ul {
  display: block;
}

.menu_left{
  float: left !important;
}

.menu_right{
  float: right!important;
}

.deroulant > a::after{
  content:" ▼";
  font-size: 13px;

}

.deroulant:hover > a::after{
  content: " ▲";
  font-size: 13px;
  color: #244b70;
}

nav ul li a:hover{
    // display: block;
    // margin: 0;
    background-color:  hsla(60,24%,96%,.70);
    // height: 100%;
    // border-bottom: 3px solid hsla(60,24%,96%,.60);
    // border-top: 3px solid transparent;
    color: #244b70;
    font-weight: 600;
    //padding: 13px;
    position: relative;
   // left: 1px;
    //top: 1px;
}

nav ul li a:active{
    background-color:  hsla(60,24%,96%,.55);
    // border-bottom: 3px solid hsla(60,24%,96%,.70);
    // border-top: 3px solid transparent;
    border-radius: 3px;
    color: #244b70;

    // padding: 13px;
    font-weight: 500;
    position: relative;
     left: 1px;
     top: 1px;
}

nav .fa-house{
    margin-right: 13px;
}

nav .fa-house:hover{
    position: relative;
    left: 1px;
    top: 1px;
    margin-right: 13px;
}

.sous_menu{
  position: absolute;
  width: auto;
  z-index: 1000;
  flex-direction: column;
  padding: 10px;
  background-color: #244b70;
  margin-top: -1px;  
}

.deroulant .sous_menu > li{
  display: block;
}


.sous_menu:hover{
  background-color: #244b70;
 /* display: block;*/
}

-
Edité par karvaneg 14 septembre 2023 à 15:58:47

karvaneg