CSS实战-下拉菜单
2019-10-22 17:30
447 查看
- 下拉菜单
<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; }
相关文章推荐
- 纯css和js版下拉菜单
- joomla中css 下拉菜单的制作
- 你值得拥有的CSS下拉菜单效果
- js+css+div制作水平下拉菜单_是宇斯..不是宙斯...艾倪书焚....
- 实战javascript之动态加载js和动态加载css
- 前端 HTML+CSS实战篇(云道首页)
- 基于《Selenium 2自动化测试实战》的学习笔记(6)—— CSS 定位
- CSS边角折叠实战
- WAP 手机终端 CSS 样式实战
- JavaScript+CSS下拉菜单系列(一)——仅一个选项下拉,高度固定的下拉菜单
- 纯CSS仿经典下拉菜单代码
- jquery下拉菜单代码(jq css)
- 用div+css做下拉菜单,当鼠标移向2级菜单时,为什么1级菜单的a:hover背景色就不管用了?
- CSS 动画指南: 原理和实战(二)
- 简单jqury+css下拉菜单
- CSS高效开发实战-CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)实现多背景
- CSS 动画指南: 原理和实战 (一)
- 纯DIV+CSS制作的下拉菜单,二级下拉菜单,三级下拉菜单(无JS)
- Bootstrap CSS——按钮组以及带下拉菜单的按钮组
- 纯css横向下拉菜单