实例代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:20px;
}
button{
width:65px;
height:50px;
background-color:green;
color:white;
font-size:20px;
border-style:solid;
border-width:0px;
cursor:pointer; /* 鼠标经过有小手样式*/
}
.div1{
float:left;
}
.div2{
min-width:160px; /*最小保留160px宽度*/
position:absolute; /*不保留位置，脱离文档流。*/
background-color:#f9f9f9;
display:none; /*隐藏div块元素*/
/*left:0; /*定位左位置*/*/
}
a{
color:black;
padding:10px;
text-decoration:none; /*取消链接下划线*/
display:block;
}
a:hover{
background-color:#f1f1f1;
}
.div1:hover .div2{
display:block;
}
button:hover {
background-color:red;
}
.div_right{
float:right;
}
.div_right:hover .div2{
display:block;
right:0;
}
</style>
</head>
<body>
<h1>对齐的下拉内容</h1>
<p>通过left和right属性，决定下拉内容是左到右还是右到左。</p>
<div class="div1" >
<button>left</button>
<div class="div2">
<a href="https://www.dwoke.com">Link 1</a>
<a href="https://www.dwoke.com">Link 2</a>
<a href="https://www.dwoke.com">Link 3</a>
</div>
</div>
<div class="div_right" >
<button>left</button>
<div class="div2">
<a href="https://www.dwoke.com">Link 1</a>
<a href="https://www.dwoke.com">Link 2</a>
<a href="https://www.dwoke.com">Link 3</a>
</div>
</div>
</body>
</html>运行效果：
评论