微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

phpcms V9多级导航调用+当前栏目高亮显示示范代码

imsun,sans-serif;font-size:14px;line-height:21px;white-space:normal;background-color:#FFFFFF;">使用PHPcms V9制作头部文件header.html的导航时,循环调用一级和二级以及更多级别的栏目,有时需要同时显示当前栏目的子栏目(比如下拉菜单),还要高亮显示当前栏目时,就可以采用如下代码
normal;background-color:#FFFFFF;">
normal;background-color:#FFFFFF;">以下配套的css代码仅供参考!效果如图:

normal;background-color:#FFFFFF;">.nav { width: 960px; height: 30px; margin: 0 auto; line-height: 30px; }
normal;background-color:#FFFFFF;">.nav ul li { float: left; width: 70px; text-align: center; cursor: pointer; }
normal;background-color:#FFFFFF;">.nav ul li a { color: #fff; display: block; text-decoration: none; }
normal;background-color:#FFFFFF;">.nav ul li:hover { background: #d9e4f9; }
normal;background-color:#FFFFFF;">.nav ul li:hover a { color: #000; }
normal;background-color:#FFFFFF;">.nav ul li a:hover { color: #f00; background: #d9e4f9; }
normal;background-color:#FFFFFF;">.nav ul li ul { display: none; position: absolute; background: #d9e4f9; z-index: 999; }
normal;background-color:#FFFFFF;">.nav ul li ul li { float: none; margin-right: 0; }
normal;background-color:#FFFFFF;">.nav ul li:hover ul { display: block; }
normal;background-color:#FFFFFF;">.nav ul li:hover ul li a { color: #000; }
normal;background-color:#FFFFFF;">.nav ul li ul li a:hover { color: #f00; background: #fff; }
normal;background-color:#FFFFFF;">.nav ul li .hover { background: #fff; color: #000; }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐