current position：Home>CSS foundation-15-drop-down menu

CSS foundation-15-drop-down menu

2022-04-29 14:01:12【Xuan Degong】

List of articles

1. Basic implementation 

<!DOCTYPE html>
<html>
<head>
<title> Xuande... Chronicles </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>

<div class="dropdown">
  <span> Choose generals </span>
  <div class="dropdown-content"> 
	  <p> Guan yu </p>
	  <p> Zhang Fei </p>
	  <p> zhaoyun </p>
	  <p> d </p>
  </div>
</div>

</body>
</html>
  • effect
    Insert picture description here
  • inline-block

And display: inline comparison ：

  • display: inline-block Allows you to set the width and height on the element （ The top and bottom outer margins are retained / padding ）
  • display: inline Will not be .

And display: block comparison ：

  • display：inline-block Do not add line breaks after elements .（ So this element can be next to other elements ）
  • display: block Add a line break after the element .

2. Add some effects 

<!DOCTYPE html>
<html>
<head>
<title> Xuande... Chronicles </title>
<meta charset="utf-8">
<style> /*  Drop down button style  */ .dropbtn {
       background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; /*  Mouse to hand  */ cursor: pointer; } /*  Containers  <div> -  Need to locate the drop-down content  */ .dropdown {
       position: relative; display: inline-block; } /*  Drop down content  ( Hide by default ) */ .dropdown-content {
       display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; /*  Add shadow  */ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } /*  Drop down menu link  */ .dropdown-content a {
       color: black; padding: 12px 16px; text-decoration: none; display: block; } /*  Move the mouse up and modify the link color of the drop-down menu  */ .dropdown-content a:hover {
      background-color: #f1f1f1} /*  When the mouse moves up, the drop-down menu is displayed  */ .dropdown:hover .dropdown-content {
       display: block; } /*  When the drop-down content is displayed, modify the background color of the drop-down button  */ .dropdown:hover .dropbtn {
       background-color: #3e8e41; } </style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn"> Choose generals </button>
  <div class="dropdown-content">
    <a href="./guanyu.html"> Guan yu </a>
    <a href="./zhangfei.html"> Zhang Fei </a>
    <a href="./zhaoyun.html"> zhaoyun </a>
  </div>
</div>

</body>
</html>
  • effect
    Insert picture description here

copyright notice
author[Xuan Degong],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291215151541.html

The sidebar is recommended

guess what you like

Random recommended