一个常见的下拉框（css）

<!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>

转载于:https://www.cnblogs.com/effie0220/p/6905050.html

一个常见的下拉框（css）相关推荐

使用微信小程序做一个简易的下拉框，无动画效果，纯原生写法（下拉列表框）
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
Android一个通用的下拉框适配器（kotlin版本）
通用的下拉适配器介绍适配器的实现 SpinnerAdapter 适配器布局项目实战效果展示介绍通常一个项目中要用到好多次下拉框,但是每次下拉框的数据来源都不一样,需要展示在界面上的字段都不 ...
php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
javascript实现的一个带下拉框功能的文本框
我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求.对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择.那么,我们希望它看上去像一个可以输 ...
html下拉框12个月,html 如何实现一个“圆角select下拉菜单”呢？
摘要: 下文讲述css设置一个圆角select下拉框的示例分享,如下所示: 圆角可以让一个元素看起来更圆滑和美观,所以html元素进行会设置将其设置圆角这一操作, 下文讲述对select下拉框设置圆角 ...
css div 下拉框内容自适应,div+css模拟select下拉框
无标题文档 .mod_select ul{margin:0;padding:0;} .mod_select ul:after{ display: block; clear: both; visibil ...
下拉框_教你封装 Element Tree 树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题,默认的样式简直难看到死,所以大家都会想到去设置select高度问题,当然一些组件或者插件也可以实现对其完美优化,我之前的一篇文章也写到了相关优化方法& ...
python selenium --处理下拉框
下拉框是我们最常见的一种页面元素,对于一般的元素,我们只需要一次就定位,但下拉框里的内容需要进行两次定位,先定位到下拉框,再定位到下拉框内里的选项. drop_down.html <html&g ...

一个常见的下拉框（css）

一个常见的下拉框（css）相关推荐

最新文章

热门文章