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

  • 时间:2018-07-21 23:31 作者:窗外楼 来源:窗外楼 阅读:40
  • 扫一扫,手机访问
摘要:大家好,今天我们来分享一下使用纯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)
最新发布的资讯信息
【系统环境|服务器应用】Spring02——实现动态代理商阻拦器(2018-10-20 23:18)
【系统环境|服务器应用】Spring01——SpringIoC容器(2018-10-20 23:17)
【系统环境|服务器应用】最大堆进阶:堆排序及其优化(2018-10-20 23:17)
【系统环境|服务器应用】【一文读懂】百度一下,背后可不只是简单的一下(2018-10-20 23:17)
【系统环境|服务器应用】注意!这5种搜索套路,让你资源搜索不求人(2018-10-20 23:17)
【系统环境|服务器应用】Java线程池---Executor框架源码深度解析(2018-10-20 23:16)
【系统环境|服务器应用】X.509证书认证模式简介(2018-10-20 23:16)
【系统环境|服务器应用】Spring Security权限框架理论与实战(二)-常用权限阻拦器(2018-10-20 23:16)
【系统环境|服务器应用】做程序员太辛苦了, 我想换行,我该怎样办? “敲一下回车。”(2018-10-20 23:16)
【系统环境|服务器应用】mysql中使用select的正确姿势你知道吗?(2018-10-20 23:16)
手机二维码手机访问领取大礼包
返回顶部