<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</title>
<meta charset="gbk"/>
<style type="text/css">
.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="#">12312 1 </a>
<a href="#">12312 1 </a>
<a href="#">12312 1 </a>
</div>
</div>
<div class="dropdown" style="float:right">
<button class="dropbtn">右</button>
<div class="dropdown-content">
<a href="#">12312 1 </a>
<a href="#">12312 1 </a>
<a href="#">12312 1 </a>
</div>
</div>
</body>
</html>
4905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
