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

  • 时间:2018-07-21 23:31 作者:窗外楼 来源:窗外楼 阅读:120
  • 扫一扫,手机访问
摘要:大家好,今天我们来分享一下使用纯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)
最新发布的资讯信息
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
【系统环境|】教你零基础如何快速入门大数据技巧(2019-05-12 11:25)
【系统环境|】想学习大数据?这才是完整的大数据学习体系(2019-05-11 11:33)
手机二维码手机访问领取大礼包
返回顶部