下面是一个基本的CSS下拉菜单示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dropdown Menu</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Navigation bar styles */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
position: relative;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a:hover {
background-color: #555;
}
/* Dropdown menu styles */
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: #f2f2f2;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #555;
}
.navbar li:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
</div>
</li>
<li><a href="#about">About</a></li>
</ul>
</div>
</body>
</html>
|
在这个示例中，创建了一个带有下拉菜单的导航栏。当鼠标悬停在带有下拉菜单的链接上时，下拉菜单会显示出来。点击菜单项外的区域，下拉菜单会隐藏。
基本下拉菜单
下面是一个基本的 HTML/CSS 下拉菜单示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Dropdown Menu</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Dropdown menu styles */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.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;
}
</style>
</head>
<body>
<div class="dropdown">
<span>Hover over me</span>
<div class="dropdown-content">
<a href="#link1">Link 1</a>
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>
</div>
</div>
</body>
</html>
|
在这个示例中，当鼠标悬停在 “Hover over me” 上时，下拉菜单会显示出来。点击菜单项外的区域，下拉菜单会隐藏。
下拉菜单
下面是一个基本的 HTML/CSS 下拉菜单示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Dropdown Menu</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Dropdown menu styles */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.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;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
|
在这个示例中，创建了一个基本的下拉菜单。当鼠标悬停在菜单按钮上时，下拉菜单会显示出来。点击菜单项外的区域，下拉菜单会隐藏。
下拉内容对齐方式
要调整下拉菜单内容的对齐方式，你可以使用 CSS 中的 text-align 属性。以下是一个示例，将下拉菜单内容左对齐：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aligned Dropdown Menu</title>
<style>
/* Resetting default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Dropdown menu styles */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
text-align: left; /* 设置下拉菜单内容左对齐 */
}
.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;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
|
在这个示例中，我在 .dropdown-content 中使用了 text-align: left; 来设置下拉菜单内容左对齐。你可以根据需要调整对齐方式为左对齐、右对齐或居中对齐。
CSS 下拉菜单 – 菜鸟教程 – 学的不仅是技术，更是梦想！
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
