下拉菜单是交互式网站最重要的部分之一。 CSS用于设计下拉菜单。下拉列表是无序列表下的一堆列表, 即<ul>, 在HTML世界中广为人知。 <ul>标记下的嵌套列表(<li>)标记用于创建下拉结构。要显示效果, 请对结构中存在的组件使用CSS。 CSS是非常简单的属性, 用于创建下拉菜单。
<!DOCTYPE html>
<html>
<head>
<title>Dropdown property</title>
</head>
<body>
<nav>
<ul>
<li class = "Lev-1">
<a href = "">Level-1</a>
<ul>
<li><a href = "">Link 1</a></li>
<li><a href = "">Link 2</a></li>
<li><a href = "">Link 3</a></li>
<li><a href = "">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>输出如下：
例子：在HTML结构中添加CSS属性以创建交互式下拉结构。
<!DOCTYPE html>
<html>
<head>
<title>Navigation property</title>
<style>
a {
color: white;
background-color:#990;
text-decoration: none;
}
nav{
background: #333;
}
nav>ul{ margin: 0 auto; width: 80px; }
nav ul li{
display: block;
float: left;
margin-left:-40px;
position: relative;
}
nav ul a{
display: block;
float: left;
width: 150px;
padding: 10px 20px;
}
nav ul a:hover{
background: #090;
}
nav ul li ul li{
float: none;
}
nav ul li ul{
display: none;
position: absolute;
background: #333;
top: 42px;
}
nav ul li:hover>ul{
display: block;
}
nav ul li a{
display: block;
}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<p>Dropdown Navigation property</p>
<nav>
<ul>
<li class = "Lev-1">
<a href = "">Level-1</a>
<ul>
<li><a href = "">Link 1</a></li>
<li><a href = "">Link 2</a></li>
<li><a href = "">Link 3</a></li>
<li><a href = "">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>输出如下：
以上编写的代码基于下拉结构产生适当的输出。 HTML代码的重要部分讨论如下：
- 导航是最外面的容器
- nav ul li ul li – float设置为none, 以便当我们将鼠标悬停在它上面时, 它保持不变。
- 使用相对位置, 以便li相对于其组件移动或更改其位置。
- 悬停后使用">"可查看悬停对li的下一个ul的影响。
右对齐的下拉列表：右对齐下拉菜单是浮点值正确的下拉菜单, 用于在右侧屏幕上显示下拉菜单内容。在包含内容的div处添加右浮动。
<!DOCTYPE html>
<html>
<head>
<title>right-aligned dropdown content property</title>
<style>
#drop {
background-color: teal;
color: white;
padding: 10px;
font-size: 16px;
width: : 200px;
height: : 60px;
border-radius: 5px;
font-size: 20px;
}
#drop-down {
position: relative;
display: inline-block;
}
#dropdown-menu {
display: none;
position: absolute;
background-color: #666;
width: 160px;
margin-left:-45px;
border-radius: 5px;
z-index: 1;
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
#dropdown-menu a:hover {background-color: #ddd;}
#drop-down:hover #dropdown-menu {display: block;}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<p>Right-aligned Dropdown content property</p>
<div id = "drop-down" style = " float: right; margin-right: 70px;">
<button id = "drop">DropDown</button>
<div id = "dropdown-menu">
<a href = "">Item 1</a>
<a href = "">Item 2</a>
<a href = "">Item 3</a>
<a href = "">Item 4</a>
</div>
</div>
</body>
</html>输出如下：
图片下拉列表：它不是下拉菜单, 但是会放大你悬停的图像。需要基本的CSS和图像才能使其正常工作。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Image Dropdown</title>
<style>
.dropmenu {
position: relative;
display: inline-block;
margin-left:150px;
}
.sub-dropmenu {
display: none;
position: absolute;
}
.dropmenu:hover .sub-dropmenu {
display: block;
}
.enlarge {
padding: 15px;
text-align: center;
}
.gfg {
margin-left:40px;
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "gfg">Image Dropdown property</div>
<div class = "dropmenu">
<img src = "https://media.lsbin.org/wp-content/uploads/temp1.png"
width = "150" height = "50" align = "middle">
<div class = "sub-dropmenu">
<img src = "https://media.lsbin.org/wp-content/uploads/temp1.png"
width = "600" height = "200">
</div>
</div>
</body>
</html>输出如下：
点击的下拉菜单：
这需要对JavaScript有基本的了解, 因为它用于运行某些功能以使单击的下拉列表起作用。
例子：
<!DOCTYPE html>
<html>
<head>
<title>clicked dropdown</title>
<style type = "text/css">
button {
background: #009900;
width: 200px;
height: 60px;
color: white;
border: 1px solid #fff;
font-size: 20px;
border-radius: 5px;
}
ul li {
list-style: none;
}
ul li a {
display: block;
background: #c99;
width: 200px;
height: 50px;
text-decoration: none;
text-align: center;
padding: 10px;
border-radius: 5px;
text-align: center;
color: white;
font-size: 25px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
background: #009900;
}
.open {display: none;}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
<script type = "text/javascript">
function open_menu(){
var clicked= document.getElementById('drop-menu');
if(clicked.style.display=='block')
{
clicked.style.display='none';
}
else{
clicked.style.display='block';
}
}
</script>
</head>
<body>
<div class = "gfg">lsbin</div>
<p>Clicked Dropdown content property</p>
<div id = "dropdown">
<button onclick = "open_menu()">Click Me!</button>
<div class = "open" id = "drop-menu">
<ul>
<li><a href = "">Item-1</a></li>
<li><a href = "">Item-2</a></li>
<li><a href = "">Item-3</a></li>
<li><a href = "">Item-4</a></li>
</ul>
</div>
</div>
</body>
</html>输出如下：
注意：该代码的一些重要亮点：
- 单击"单击我"按钮时, javascript函数将展开和折叠菜单。
- 我们使用onclick调用button标记中的javascript函数。
