博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用css实现三级导航菜单
阅读量:5101 次
发布时间:2019-06-13

本文共 712 字,大约阅读时间需要 2 分钟。

主要使用css的hover伪类来实现该功能。

主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现!

  对li添加类selected,对该类添加position:relative属性,然后对其二级三级菜单添加position:absolute属性,并设置其top:-1px(因为有1像素的边框)left:-999px;使其在也页面中向左偏移出窗口。

  对li设置:hover伪类,当鼠标指针移动到li上时,改变二级三级菜单的left值,这样就可以实现一个简单的三级导航菜单!

代码如下:

    
三级导航菜单

转载于:https://www.cnblogs.com/forest-green/p/5876077.html

你可能感兴趣的文章
20130909
查看>>
SQL语言:DQL,DML,DDL,DCL
查看>>
PB与各种数据库连接
查看>>
1003 阶乘后面0的数量
查看>>
HashMap,LinkedHashMap和Hashtable类的深入剖析与理解
查看>>
智能家居中的物联网网关的可信计算平台模块(TPM)设计
查看>>
CUDA Fortran for Scientists and Engineers第二版翻译
查看>>
[转]多列索引
查看>>
mbstring未安装
查看>>
os模块
查看>>
C# 客服端上传文件与服务器器端接收 (简单代码)
查看>>
nginx搭建高性能流媒体技术
查看>>
Code a simple telnet client using sockets in python
查看>>
java 生成jar包并保留注释
查看>>
文件下载的几种方法
查看>>
select选中值传递到后台action中
查看>>
iOS中实现plist中读取数据实现Cell的显示(字典转模型,实现按序分组)修改图片的尺寸...
查看>>
使用自定义端口连接SQL Server 的方法
查看>>
ajax成功后XML 解析错误:格式不佳
查看>>
反射ModelToDto
查看>>