Utilisez du CSS pur pour implémenter un menu déroulant qui apparaît après le passage de la souris dessus. Exemple d'explication (avec code).

Ouvrez n'importe quel site Web sur Internet, et vous constaterez que ces sites Web comportent des parties de navigation, et certaines navigations auront des menus déroulants après que la souris les survole. Alors, comment créer de tels menus déroulants ? En fait, vous pouvez utiliser du CSS pur pour créer un menu déroulant de navigation. Ensuite, parlons de comment créer un menu déroulant avec CSS. OK, entrons dans le vif du sujet.

Partie HTML :
1. Nous pouvons utiliser n'importe quel élément HTML pour ouvrir le menu déroulant, tel que : ou un élément (comme < ;div>) pour créer le contenu du menu déroulant et le placer où vous le souhaitez.
3. Utilisez les éléments

pour envelopper ces éléments et utilisez CSS pour styliser le contenu de la liste déroulante.
Partie CSS :
1. .dropdown utilise position:relative, qui définira le contenu du menu déroulant à placer dans le coin inférieur droit du bouton déroulant (en utilisant position:absolute).
2. .dropdown-content est le véritable menu déroulant. Il est masqué par défaut et sera affiché une fois que la souris se déplacera vers l'élément spécifié. Remarque : Si vous souhaitez que le contenu de la liste déroulante ait la même largeur que le bouton déroulant, définissez la largeur sur 100 %.
3. Le sélecteur :hover est utilisé pour afficher le menu déroulant lorsque la souris est déplacée sur le bouton déroulant.

Exemple : utilisez du CSS pur pour créer un menu déroulant de navigation, et le menu déroulant apparaît lorsque la souris passe dessus

Code HTML :

<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
   <button class="dropbtn">下拉菜单</button>
   <div class="dropdown-content">
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
   </div>
  </div>

Copier après la connexion

Partie CSS :

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   }   
   .dropdown {
    position: relative;
    display: inline-block;
   }
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

Copier après la connexion

Regardez l'image de l'effet :

Ce qui précède utilise des exemples pour montrer comment créer un menu déroulant avec du CSS pur Dans les projets réels, vous pouvez, selon vos besoins, définir le style souhaité !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!