android带倒立三角的下拉菜单样式,经典的 div + css 鼠标 hover 下拉菜单

最新推荐文章于 2024-05-18 09:58:45 发布

weixin_39835158

最新推荐文章于 2024-05-18 09:58:45 发布

阅读量302

点赞数

文章标签： android带倒立三角的下拉菜单样式

经典的 div + css 鼠标 hover 下拉菜单

效果图：

源码：

nav {

margin:100px auto;

text-align:center;

}

nav ul {

border-radius:10px;

background:linear-gradient(to bottom,#efefef,#bbbbbb);

padding:0 20px;

display:inline-table;

position:relative;

box-shadow:1px 1px 3px #666;

list-style:none;

}

nav ul ul {

display:none;

list-style:none;

}

nav ul li {

float:left;

list-style:none;

}

nav ul::after {

content:"";

display:block;

clear:both;

list-style:none;

}

nav ul li a {

display:block;

padding:25px 40px;

color:#000;

text-decoration:none;

font-family:"微软雅黑";

}

nav ul li:hover > ul {

display:block;

list-style:none;

}

nav ul li:hover {

background:linear-gradient(to bottom,#4f5964,#5f6975);

list-style:none;

}

nav ul li:hover a {

color:#FFF;

}

nav ul ul {

background:#5f6975;

border-radius:0;

position:absolute;

top:100%;

padding:0;

list-style:none;

}

nav ul ul li {

float:none;

border-top:1px solid #6b727c;

border-bottom:1px solid #575f6a;

list-style:none;

}

nav ul ul li a {

color:#FFF;

}

nav ul ul li a:hover {

background:#4b545f;

}

nav ul ul ul {

width:100%;

position:absolute;

left:100%;

top:50%;

list-style:none;

}

关于css中hover下拉框的一个bug

写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

CSS 实现样式下拉菜单

下拉菜单的实现脚本:

CSS写动态下拉菜单 -----2017-03-27

动态网站第一步:动态下拉菜单关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...

纯css实现横向下拉菜单

自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

CSS打造三级下拉菜单

首页第二页

运用css，对于下拉菜单的制作

一个用纯CSS实现的下拉菜单

用CSS做下拉列表的特效,代码如下: & ...

div+css模拟select下拉框

index ffs、index fs原理考究-1109

h2 { margin-top: 0.46cm; margin-bottom: 0.46cm; direction: ltr; line-height: 173%; text-align: justi ...

HTTP response codes

面试被问起了413和503,我觉得也是够BT的,能问出这种无聊的问题.很多返回码几乎很难遇到,不过还是把MDN上很好的描述转过来作为一个reference. HTTP协议状态码表示的意思主要分为五类 ...

解决adb server is out of date&period; killing&period;&period;&period;问题

在运行 adb 命令时出现了例如以下提示: adb server is out of date. killing... 导致 adb 无法正常启动,更无法运行其它命令. 有问题怎么办?百度呗.查了查 ...

【bzoj4198】 Noi2015—荷马史诗

http://www.lydsy.com/JudgeOnline/problem.php?id=4198 (题目链接) 题意一篇文章n个单词,每个出现了${w_i}$次,用k进制数代替单词,使得任意 ...

360开启wifi无网络访问处理办法

一.背景说明台式机默认没有无线网卡的,想开个wifi,在电脑上插上了个usb无线网卡然后开启“360免费WiFi”.但显示“无网络访问”,连上之后确实也不能访问外部网站. 二.处理办法依次打开“控 ...

CodeBlocks中我遇到的无法调试问题及解决方案

CodeBlocks中遇到无法调试问题,可能有很多种,以下是我遇到的问题及解决方案 1.当无法调试时,如果IDE提示你出现下图中红色问题,说明你的调试器没有装好 2.在菜单栏点击Settings--D ...

Tools - 速查表与备忘单(Cheat Sheet)

Cheat Sheets Rico's cheatsheets Cheat-Sheets.org Python Python Cheat sheet Python Programming Cheat ...

golang的一些基础数据类型转换

int -- string //string到int value_int,err:=strconv.Atoi(string) //int到string str:=strconv.Itoa(value_ ...

MyEclipse如何配置Struts2源码的框架压缩包

1.MyEclipse如何配置Struts2源码的框架压缩包如本机的Struts2框架压缩包路径为:D:\MyEclipseUserLibraries\struts\struts-2.3.15.3- ...