Maison > interface Web > tutoriel CSS > Introduction à la méthode simple de création d'un menu déroulant CSS

Introduction à la méthode simple de création d'un menu déroulant CSS

高洛峰
Libérer: 2017-03-20 11:49:21
original
1883 Les gens l'ont consulté

L'exemple de cet article partage le code d'implémentation spécifique du menu déroulant CSS pour votre référence. Le contenu spécifique est le suivant

<!DOCTYPE html>
<html>
<head>
  <title>下拉菜单实例</title>
  <meta charset="utf-8">
  <style>
  .dropdown {   
      position: relative;   
      display: inline-block;   
  }   
  .dropdown-content {   
      display: none;   
      position: absolute;   
      background-color: #f9f9f9;   
      min-width: 160px;   
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
      padding: 12px 16px;   
  }   
  .dropdown:hover .dropdown-content {   
      display: block;   
  }   
  </style>
</head>
<body>
<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>
<p class="dropdown">
  <span>鼠标移动到我这!</span>
  <p class="dropdown-content">
    <p>php中文网</p>
    <p>m.sbmmt.com</p>
  </p>
</p>
</body>
</html>
Copier après la connexion


Introduction à la méthode simple de création dun menu déroulant CSS

Articles connexes :

Menu déroulant CSS

Explication détaillée du menu déroulant CSS

Effets de menu déroulant CSS3 soulignés simples qui suivent l'effet

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal