一個常見的下拉框（css）

最後更新：2017-05-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：pos abs 隱藏正方形 box meta style 沒有 enter

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式功能表</title>
<style>
.select {
margin: 50px 500px;
width: 180px;
text-align: center;
}

.select a {
color: #fff;
text-decoration: none;
}

.select ul,
.select li {
margin: 0;
padding: 0;
list-style: none;
}

.select span {
line-height: 46px;
background-color: #41b1d9;
display: block;
margin-bottom: 20px;
position: relative;
z-index: 2;
border-radius: 5px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.select span a:after{
content: " ";
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-bottom: solid 6px #fff;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: 1px;
margin-left: 10px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

/*給以整體的陰影和圓角但是不能overflow*/
.drop {
left: 0;
right: 0;
top: -9999px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
position: absolute;
z-index: 1;
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

/*給送個下拉助攻*/
.select:hover span{
background-color: #1f93bc;
}

.select:hover span a:after{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.select:hover .drop{
position: static;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}

/*一個很重要的三角形*/
.drop li:first-child:before {
content: " ";
font-size: 0;
line-height: 0;
margin: 0 auto;
display: block;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整體一樣的投影*/
background-color: #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /*一個正方形傾斜四十五度就是三角了但是要把下半部分藏起來*/
position: relative;
top: -5px; /*果斷的露出上半部分*/
z-index: 1; /*果斷的隱藏下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.drop li a {
color: #888;
line-height: 46px;
border-bottom: solid 1px #eee;
font-size: 14px;
display: block;
background-color: #fff; /*要有背景色才能蓋住呀*/
position: relative;
z-index: 2; /*這裡很重要要擋住三角形的下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}

/*以下兩塊控制第一個和最後一個LI要圓角因為最外邊的div沒有overflow 也不可以overflow*/
.drop li:first-child a{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: -10px;
}
.drop li:last-child a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: none;
}

/*hover事件給了li 先改變三角再改變a*/
.drop li:hover:before{
background-color: #41b1d9;
}
.drop li:hover a {
background-color: #41b1d9;
color: #fff;
}
</style>
</head>

<body>
<div class="select">
<span><a href="javascript:void(0);">滑鼠浮上來</a></span>
<div class="drop">
<ul>
<li>
<a href="javascript:void(0);">下拉式功能表一</a>
</li>
<li>
<a href="javascript:void(0);">下拉式功能表二</a>
</li>
<li>
<a href="javascript:void(0);">下拉式功能表三</a>
</li>
<li>
<a href="javascript:void(0);">下拉式功能表四</a>
</li>
</ul>
</div>
</div>
</body>

</html>

一個常見的下拉框（css）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

一個常見的下拉框（css）

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support