汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

CSS如何如何实现下拉菜单效果

作者:admin 发布时间:2019-08-11
前面刚说过了,今天我们来看看下拉菜单,一般是用javascript制作的,但是实际上CSS也可以实现的,只是很可惜,IE6是不支持的,如今IE6的用户太多,用CSS制作的下拉菜单将不能显示正常,不过IE7已经可以正常显示了,其他的大多数浏览器也都是支持的。做一个例子尝试一下:用列表的形式来做: ul  id= nav li a href= # index /a /li li a href= # nav1 /a ul li a href= # index1 /a /li li a href= # nav11 /a /li li a href= # nav22 /a /li li a href= # nav33 /a /li /ul /li li a href= # nav2 /a /li li a href= # nav3 /a /li /ul 一个简单的内嵌列表,定义nav是为了设置样式,#nav li与#nav ul li不一样。 去除了顶级样式列表的默认属性:#nav,#nav ul{Padding:0;Margin:0;List-style-type:none;} 对顶级菜单项定义:#nav li{Float:left;Position:relative;}相对位置定义为了能使的下级菜单位置不受影响。 定义所有的链接样式:#nav a:link, #nav a:visited{Text-decoration:none;Display:block;} 定义下级列表样式:#nav ul{Display:none;Position:absolute;}使得下级菜单在默认的时候不显示出来,并且下级菜单内的列表不会影响页面上其他内容的位置。 定义下级菜单列表项:#nav ul li{Border-bottom:1px solide #FFFFFF;} 最后定义顶级菜单的hover伪类属性:#nav li:hover ul{Display:block;}这样,当鼠标移至顶级菜单的列表项上时,下级菜单可以显示出来。相关:。
网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1