纯CSS实现的二级下拉导航菜单实例代码_html/css_WEB-ITnose

纯CSS实现的二级下拉导航菜单实例代码:
二级下拉菜单在众多的网站都有应用，不但能够有效的组织分类导航，并且能够节省大量的网站空间，也能够实现网站的动态化效果，大多数二级导航菜单都是结合javascript实现，本章节介绍一下使用纯css实现的下拉菜单。
代码如下:

      蚂蚁部落  .navigator{  width:80%;  margin:0;}.navigator ul{  padding:0;  margin:0;  list-style-type:none;}.navigator li{  float:left;  position:relative;}.navigator ul li a, .navigator ul li a:visited {  display:block;  text-align:center;  text-decoration:none;  width:184px;  height:50px;  color:black;  border:1px solid #fff;  border-width:1px 1px 0 0;  background:#CCCCCC;  line-height:50px;  font-size:17px;}.navigator ul li:hover a{  color:#fff;  background:#CCCCFF;}.navigator ul li ul{  display:none;}.navigator ul li:hover ul{  display:block;  position:absolute;  top:51px;  left:0;  width:185px;}.navigator ul li:hover ul li a{  display:block;  background:#CCFFFF;  color:#000;}.navigator ul li:hover ul li a:hover {  background:#dfc184;  color:#000;}            蚂蚁部落                div css教程          javascript教程          jQuery教程          html教程          json教程          ajax教程                   后台教程                asp教程          asp.net教程          php教程          jsp教程                   交流专区                seo交流          网站运营          百度优化          谈天说地          网站排名

      
查看更多关于纯CSS实现的二级下拉导航菜单实例代码_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110495

更新时间：2022-11-17 阅读：30次