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
- 高洛峰original
- 2017-03-20 11:49:211906parcourir
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>
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
Article précédent：5 façons de masquer des éléments de page avec CSSArticle suivant：5 façons de masquer des éléments de page avec CSS