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

作者 : 开心源码 本文共1214个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共41人阅读

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

下拉菜单之纯CSS实现方法(CSS小白第五期)1.首先创立一个多层导航列表,本次只选取列表项中“Services”和“Products”两项为例。

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

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:半夜写的没怎样检查,如有漏洞请告知,谢谢!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 下拉菜单之纯CSS实现方法(CSS小白第五期)

发表回复