CSS drop down menu

CSS dropdown menus are a common user interface element that allow users to select from a range of options. A drop-down menu usually consists of a triggering element (such as a button or link) and one or more lists of options. When the user interacts with the triggering element (for example, by clicking or hovering), the list expands down or slides out.

Here is an example of a simple CSS dropdown menu:

HTML code:

<div class="dropdown">
  <button class="dropdown-button">选择菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项 1</a>
    <a href="#">菜单项 2</a>
    <a href="#">菜单项 3</a>
  </div>
</div>

CSS code:

.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;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
    
    
  display: block;
}

In this example, a drop-down menu containing three menu items is created. When the user hovers over the Select Menu button, a drop-down menu will appear. This drop-down menu uses absolute positioning and z-index properties to position it on the page, and also uses the box-shadow property to add a shadow effect.

Dropdown content alignment

text-alignThe alignment of the drop-down content can be set through the CSS property. For example, if you need to set the left alignment of the drop-down content, you can use the following code:

.dropdown-content {
    
    
    text-align: left;
}

Similarly, if you need to set the right alignment of the drop-down content, you can use the following code:

.dropdown-content {
    
    
    text-align: right;
}

Please note that these codes should be added to your CSS stylesheet and make sure the stylesheet is loaded correctly into your HTML file.

Example

1. Picture drop-down

Here's a simple example that uses HTML and CSS to create a drop-down menu containing images:

HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">选择图片</button>
        <div class="dropdown-content">
            <a href="#"><img src="path_to_image1.jpg" alt="Image 1"></a>
            <a href="#"><img src="path_to_image2.jpg" alt="Image 2"></a>
            <a href="#"><img src="path_to_image3.jpg" alt="Image 3"></a>
        </div>
    </div>
</body>
</html>

CSS code (styles.css):

.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;
    z-index: 1;
}

.dropdown-content img {
    
    
    width: 100%;
    height: auto;
}

.dropdown:hover .dropdown-content {
    
    
    display: block;
}

Note: You need to replace path_to_image1.jpg, path_to_image2.jpgand path_to_image3.jpgwith the path of the actual image. In this example, when you hover over the "Select Image" button, a drop-down menu appears containing three links with images.

2. Navigation bar drop-down

Here is a simple example that uses HTML and CSS to create a navigation bar containing a drop-down menu:

HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <nav>
        <ul class="navbar">
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">关于我们</a>
                <ul>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">历史</a></li>
                </ul>
            </li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

CSS code (styles.css):

.navbar {
    
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.navbar li {
    
    
    float: left;
}

.navbar li a {
    
    
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    
    
    background-color: #111;
}

/* 下拉菜单部分 */
.navbar li ul {
    
    
    display: none;
    position: absolute;
    min-width: 160px;
}

.navbar li:hover > ul {
    
    
    display: inherit;
}

In this example, when you hover your mouse over the "About Us" link, a drop-down menu appears with links for "Team" and "History."