百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

下拉菜单之纯CSS实现方法(CSS小白第五期)

liuian 2025-01-11 15:11 27 浏览

大家好，今天我们来分享一下用纯CSS实现下拉菜单效果的方法，首先我们看下效果图，如果你看过上一期的内容（CSS之垂直导航条）那么你就会发现，两者的外观主题基本一样，只不过结构稍微有些差别，所以今天我们主要讲构造，样式详解请参考上期内容

1.首先创建一个多层导航列表，本次只选取列表项中“Services”和“Products”两项为例。

2.基本设置：首先清除内边距和外边距，去掉列表默认的项目符号，关闭链接文本下划线.，给列表一个边框和背景颜色（根据自己需要）

* {margin:0;padding:0;}

ul.nav, ul.nav ul {list-style-type:none;

border：1px solid #486B02;

background-color:#8BD400;}

ul.nav a {text-decoration:none;}

3.为了使导航列表水平排列，我们可以浮动列表项，并给它设定一个宽度，为了确保下拉菜单与导航列表中的菜单项垂直对齐，需要将下拉菜单列表的宽度设置成与导航列表中列表项的宽度相同。

ul.nav li {float:left;

width:8em;}

ul.nav li ul {width:8em;}

4.关键部分：接下来我们设置下拉菜单的效果，在下拉菜单被激活之前它是隐藏状态的，因此我们可以将下拉菜单列表的position属性设置为absolute，然后给它定位到屏幕的左侧外面。当鼠标悬停到某个导航列表项的时候，使用：hover，把下拉菜单的位置再改回来，这样就可以实现下拉菜单的效果了。

ul.nav li {float:left;

width:8em;}

ul.nav li ul {width:8em;

position:absolute;left:-999em;}

ul.nav li:hover ul {left:auto;}

5.最后就是美化了，把导航链接设置为块级元素，然后修改列表的外观，设置背景颜色和斜面边框效果，（此处可参考上期详解内容）

/*斜面框效果*/

ul.nav a {display:block;

color:#2B3F00;

text-decoration:none;

padding:0.3em 1em;

border-right:1px solid #486B02;

border-left:1px solid #E4FFD3;}

ul.nav li li a {border-top:1px solid #E4FFD3;

border-bottom:1px solid #486B02;

border-left:0;

border-right:0;}

/*移除重叠的边框*/

ul.nav li a.re {border-right:0;}

ul.nav ul {border-bottom:0;}


/*鼠标悬停效果*/

ul a:hover {color:#E4FFD3;

background-color:#6DA203;}

PS：半夜写的没怎么检查，如有漏洞请告知，谢谢！

相关推荐

总结下SpringData JPA 的常用语法

SpringDataJPA常用有两种写法，一个是用Jpa自带方法进行CRUD，适合简单查询场景、例如查询全部数据、根据某个字段查询，根据某字段排序等等。另一种是使用注解方式，@Query、@Modi...

解决JPA在多线程中事务无法生效的问题

在使用SpringBoot2.x和JPA的过程中，如果在多线程环境下发现查询方法（如@Query或findAll）以及事务（如@Transactional）无法生效，通常是由于S...

PostgreSQL系列(一):数据类型和基本类型转换

自从厂子里出来后，数据库的主力就从Oracle变成MySQL了。有一说一哈，贵确实是有贵的道理，不是开源能比的。后面的工作里面基本上就是主MySQL，辅MongoDB、ES等NoSQL。最近想写一点跟...

基于MCP实现text2sql

目的：基于MCP实现text2sql能力参考：https://blog.csdn.net/hacker_Lees/article/details/146426392服务端#选用开源的MySQLMCP...

ORACLE 错误代码及解决办法

ORA-00001:违反唯一约束条件(.)错误说明：当在唯一索引所对应的列上键入重复值时，会触发此异常。ORA-00017:请求会话以设置跟踪事件ORA-00018:超出最大会话数ORA-00...

从 SQLite 到 DuckDB:查询快 5 倍，存储减少 80%

作者丨Trace译者丨明知山策划丨李冬梅Trace从一开始就使用SQLite将所有数据存储在用户设备上。这是一个非常不错的选择——SQLite高度可靠，并且多种编程语言都提供了广泛支持...

010:通过 MCP PostgreSQL 安全访问数据

项目简介提供对PostgreSQL数据库的只读访问功能。该服务器允许大型语言模型（LLMs）检查数据库的模式结构，并执行只读查询操作。核心功能提供对PostgreSQL数据库的只读访问允许L...

发现了一个好用且免费的SQL数据库工具(DBeaver)

缘起最近Ai不是大火么，想着自己也弄一些开源的框架来捣腾一下。手上用着Mac，但Mac都没有显卡的，对于学习Ai训练模型不方便，所以最近新购入了一台4090的拯救者，打算用来好好学习一下Ai（呸，以上...

微软发布.NET 10首个预览版:JIT编译器再进化、跨平台开发更流畅

IT之家2月26日消息，微软.NET团队昨日（2月25日）发布博文，宣布推出.NET10首个预览版更新，重点改进.NETRuntime、SDK、libraries、C#、AS...

数据库管理工具Navicat Premium最新版发布啦

管理多个数据库要么需要使用多个客户端应用程序，要么找到一个可以容纳你使用的所有数据库的应用程序。其中一个工具是NavicatPremium。它不仅支持大多数主要的数据库管理系统（DBMS），而且它...

50+AI新品齐发，微软Build放大招:拥抱Agent胜算几何?

北京时间5月20日凌晨，如果你打开微软Build2025开发者大会的直播，最先吸引你的可能不是一场原本属于AI和开发者的技术盛会，而是开场不久后的尴尬一幕：一边是几位微软员工在台下大...

揭秘:一条SQL语句的执行过程是怎么样的?

数据库系统能够接受SQL语句，并返回数据查询的结果，或者对数据库中的数据进行修改，可以说几乎每个程序员都使用过它。而MySQL又是目前使用最广泛的数据库。所以，解析一下MySQL编译并执行...

各家sql工具，都闹过哪些乐子?

相信这些sql工具，大家都不陌生吧，它们在业内绝对算得上第一梯队的产品了，但是你知道，他们都闹过什么乐子吗？首先登场的是Navicat，这款强大的数据库管理工具，曾经让一位程序员朋友“火”了一把。Na...

详解PG数据库管理工具--pgadmin工具、安装部署及相关功能

概述今天主要介绍一下PG数据库管理工具--pgadmin，一起来看看吧~一、介绍pgAdmin4是一款为PostgreSQL设计的可靠和全面的数据库设计和管理软件，它允许连接到特定的数据库，创建表和...

Enpass for Mac(跨平台密码管理软件)

还在寻找密码管理软件吗？密码管理软件有很多，但是综合素质相当优秀且完全免费的密码管理软件却并不常见，EnpassMac版是一款免费跨平台密码管理软件，可以通过这款软件高效安全的保护密码文件，而且可以...

一周热门
最近发表
标签列表