CSS實戰-下拉菜單

  1. 下拉菜單
<div class="dropdown-menu">
	<span class="dropdown-menu-btn">標記</span>
	<div class="dropdown-menu-content">
		<p><a href="javascript: " onclick="addTag('標籤1')">tag1</a></p>
		<p><a href="javascript: " onclick="addTag('標籤2')">tag2</a></p>
	</div>
</div>
.dropdown-menu {
    position: relative;
    display: inline-block;
    margin: 0px 10px;
}
.dropdown-menu:hover {
  	opacity: 0.8; filter:alpha(opacity=80);
}
.dropdown-menu >  .dropdown-menu-btn {
	display: inline-block; 
	vertical-align: middle; 
	background-color: #009688; 
	color: #fff; 
	white-space: nowrap; 
	text-align: center; 
	border: none; 
	border-radius: 2px; 
	cursor: pointer;
	height: 30px; 
	line-height: 30px; 
	padding: 0 10px; 
	font-size: 12px;
}
.dropdown-menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 60px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 6px 12px;
    white-space: nowrap;
}
.dropdown-menu:hover .dropdown-menu-content {
    display: block;
}
.dropdown-menu-content > p {
	margin: 5px;
}
.dropdown-menu-content > p > a {
	color: black;
	cursor: pointer;
}
.dropdown-menu-content > p > a:hover {
	color: #018074;
	font-weight: bold;
}
相關文章
相關標籤/搜索