CSS basic learning--19 drop-down menu

1. Basic drop-down menu

When the mouse moves over the specified element, a drop-down menu will appear

<!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>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>CSS教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

Example analysis

HTML section:

We can use any HTML element to open the drop-down menu, such as: <span>, or a <button> element.

Use container elements (such as: <div>) to create the content of the drop-down menu and place it wherever you want.

Wrap these elements with <div> elements and use CSS to style the drop-down content.

CSS section:

.dropdown class use position:relative, this will set the content of the dropdown menu to be placed at position:absolutethe bottom right position of the dropdown button (use).

.dropdown-content Inside the class is the actual dropdown menu. It is hidden by default and will be displayed after the mouse moves to the specified element. Note min-width that the value is set to 160px. You can modify it however you want. Note: If you want to set the width of the drop-down content to be consistent with the width of the drop-down button, you can set it width to 100% ( overflow:auto settings can be scrolled on small screens).

We use box-shadow attributes to make the dropdown look like a "card".

:hover A selector used to display a dropdown menu when the user moves the mouse over the dropdown button

2. Pull-down menu

Create a drop-down menu and allow the user to select an item from the list

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例II</title>
<meta charset="utf-8">
<style>
.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;
    min-width: 160px;
    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;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="http://www.jiaocheng.com">CSS教程 1</a>
    <a href="http://www.jiaocheng.com">CSS教程 2</a>
    <a href="http://www.jiaocheng.com">CSS教程 3</a>
  </div>
</div>

</body>
</html>

3. Alignment of drop-down content

The alignment of the drop-down is:

(1) Set the content direction of the left-floating drop-down menu to be from left to right instead of right to left

(2) Set the direction of the content of the drop-down menu floating on the right to be from right to left instead of from left to right

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例III</title>
<meta charset="utf-8">
<style>
.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;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    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;
}
</style>
</head>
<body>

<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">左</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">CSS教程 1</a>
    <a href="#">CSS教程 2</a>
    <a href="#">CSS教程 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content">
    <a href="#">CSS教程 1</a>
    <a href="#">CSS教程 2</a>
    <a href="#">CSS教程 3</a>
  </div>
</div>

</body>
</html>

Left rendering:

Right renderings: