html用css做下拉菜单,纯css实现下拉菜单

纯css实现下拉菜单

1、效果如下：

2、html代码

时间最近

时间最近
评论最多
被赞最多

3、css代码

* {

margin: 0;

padding: 0;

}

ul {

list-style: none;

}

.drop-box {

box-sizing: border-box;

width: 150px;

font-size: 14px;

text-align: center;

border-radius: 10px;

box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.175);

overflow: hidden;

margin-bottom: 5px;

}

.drop-box p {

height: 24px;

padding-top: 5px;

position: relative;

z-index: 10;

margin: 0px;

}

.drop-box p:after { /*三角箭头*/

position: absolute;

top: 10px;

right: 10px;

width: 0px;

height: 0px;

content: '';

border: 6px solid transparent;

border-top-color: #E4E4E3;

}

.drop-box .menu {

display: none;

background-color: #fff;

}

.drop-box .menu li {

height: 35px;

line-height: 35px;

}

.drop-box .menu li:hover {

background-color: #fee5ca;

color: #fda653;

}

.drop-box .menu .dp-active {

display: none;

}

.drop-box:hover {

cursor: pointer;

}

.drop-box:hover .menu {

display: block;

}

.drop-box:hover p:after {

top: 5px;

border: 6px solid transparent;

border-bottom-color: #E4E4E3;

}

html用css做下拉菜单,纯css实现下拉菜单相关推荐

纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
html怎么做响应式表格,纯CSS实现响应式表格
自从转岗至腾讯云后,项目中接触到大量的数据表格.多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理.本文介绍一种使用纯CSS实现响应式表格的方法. 通常表格中的一行代表一条项目,每列代 ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
内容介绍热点排行相关文章下载地址↓ 纯CSS实现,无JavaScript,效果不错,实用性强,兼容各种浏览器! 第一步: 下载源代码及背景图片第二步: 在网页区添加样式定义 [code] /* = ...
css中间镂空,怎么用纯CSS实现镂空效果
怎么用纯CSS实现镂空效果发布时间:2021-03-19 09:49:16 来源:亿速云阅读:99 作者:小新小编给大家分享一下怎么用纯CSS实现镂空效果,希望大家阅读完这篇文章之后都有所收获, ...
css 图标点击变色,纯CSS实现小图标变色的一些研究
by zhangxinxu from www.zhangxinxu.com/wordpress/?- 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可,任何网站均可摘要聚合,商用 ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...

html用css做下拉菜单,纯css实现下拉菜单

html用css做下拉菜单,纯css实现下拉菜单相关推荐

最新文章

热门文章