这篇文章主要为大家详细介绍了css设置网页导航栏的相关资料,需要的朋友可以参考下
html页面：FreeBSD
css文件： /*** ESSENTIAL STYLES ***/ .nav, .nav * { margin: 0; padding: 0; list-style: none; } .nav { line-height: 1.0; } .nav ul { position: absolute; top: -999em; width: 13em; /* left offset of submenus need to match (see below) */ } .nav ul li { width: 100%; } .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .nav li { float: left; position: relative; } .nav a { display: block; position: relative; } .nav li:hover ul, .nav li.sfHover ul { left: 0; top: 36px; /* match top ul list item height */ z-index: 99; } ul.nav li:hover li ul, ul.nav li.sfHover li ul { top: -999em; } ul.nav li li:hover ul, ul.nav li li.sfHover ul { left: 13em; /* match ul width */ top: 0; } ul.nav li li:hover li ul, ul.nav li li.sfHover li ul { top: -999em; } ul.nav li li li:hover ul, ul.nav li li li.sfHover ul { left: 13em; /* match ul width */ top: 0px; } /*** DEMO SKIN ***/ .nav { float: left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } .nav a { padding: 1em 1.1em 1em 1.1em; text-decoration:none; background: url("22.png") no-repeat -1px 0px; } .nav a, .nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #333; font-weight: 800; } .nav li { /*background: url("../images/menu_divider.png") no-repeat -1px 0px;*/ /*background: url("11.png") no-repeat -1px 0px;*/ } .nav li:hover a { color: #eee; } .nav li li a { background: #333; } .nav li li a:hover { text-decoration: underline; } .nav li ul { background: #000; } .nav li:hover, .nav li.sfHover, .nav a:focus, .nav a:hover, .nav a:active { outline: 0; color: #fff; background: #0088ff;/*鼠标划过或者激活*/ } .nav li ul li:hover, .nav li ul li.sfHover, .nav li ul li a:focus, .nav li ul li a:hover, .nav li ul li a:active { outline: 0; color: #fff; } .nav li.current_page_item, .nav li.current-cat { background: #333; } .nav li.current_page_item a, .nav li.current-cat a { color: #fff; }
以上就是css设置网页导航栏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608333.html
微信扫一扫 
支付宝扫一扫 
