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

  • 时间:2018-07-21 23:31 作者:窗外楼 来源:窗外楼 阅读:61
  • 扫一扫,手机访问
摘要:大家好,今天我们来分享一下使用纯CSS实现下拉菜单效果的方法,首先我们看下效果图,假如你看过上一期的内容(CSS之垂直导航条)那么你就会发现,两者的外观主题基本一样,只不过结构略微有些差别,所以今天我们主要讲构造,样式详解请参考上期内容1.首先创立一个多层导航列表,本次只选取列表项中“Service

大家好,今天我们来分享一下使用纯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:半夜写的没怎样检查,如有漏洞请告知,谢谢!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】用python写一个简单的词法分析器(2018-12-17 22:49)
【系统环境|服务器应用】Requirejs 和 AngularJS 中依赖注入(2018-12-17 22:49)
【系统环境|服务器应用】Excel 数据验证常用以及自己设置用法(2018-12-17 22:48)
【系统环境|服务器应用】WordPress 站点数据手动备份(2018-12-17 22:48)
【系统环境|服务器应用】20 个常用的 Excel 快捷键,瞬间提升工作效率(2018-12-17 22:48)
【系统环境|服务器应用】Java这些多线程基础知识你会吗?(2018-12-17 22:48)
【系统环境|服务器应用】vue中$refs的用法及作用详解(2018-12-17 22:47)
【系统环境|服务器应用】【轻知识】跑grpc的一个demo——Building APIs with GRPC, PHP, and Golang(2018-12-17 22:47)
【系统环境|服务器应用】Golang学习笔记之包管理工具(govendor)(2018-12-17 22:47)
【系统环境|服务器应用】阿里云sn1ne实例和sn2ne实例比较(2018-12-17 22:47)
手机二维码手机访问领取大礼包
返回顶部