Maison  >  Article  >  interface Web  >  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

高洛峰
高洛峰original
2017-03-20 11:49:211842parcourir

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>www.php.cn</p>
  </p>
</p>
</body>
</html>


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!

Déclaration:
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