html仿百度百科导航下拉菜单功能代码实例

本篇文章小编给大家分享一下html仿百度百科导航下拉菜单功能代码实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

演示图1

具体代码如下所示：

css/style.css" rel="stylesheet" type="text/css" />



 

  头部内容
 
 

  

   

    

     

      

       首页
      
      

       分类
       

        
自然
        
文化
        
地理
        
历史
        
生活
        
社会
        
艺术
        
人物
        
经济
        
科技
        
体育
       
      
      

       特色百科
       

        
历史上的今天
        
数字博物馆
        
城市百科
        
高校百科
        
艺术百科
        
科学百科
       
      
      

       用户
       

        
蝌蚪团
        
燃梦计划
        
百科任务
        
百科商城
       
      
      

       权威合作
       

        
合作模式
        
常见问题
        
联系方式
       
      
      

       手机百科
       

        
客户端
        
网页版
       
      
     
    
   
  
 

样式

body{margin:0;padding:0;font-family:arial,tahoma,'Microsoft Yahei','5b8b4f53',sans-serif;;}
 
.top-bar{background-color:#f3f3f3;text-align:center;padding:2.5em;}
a{padding-bottom:3px;color:white;text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
li{text-align:center;}
 
.nav-bar{position:relative;z-index:1000;overflow:hidden;min-}
.nav-bar:hover{overflow:visible;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}
.nav-bg{position:absolute;width:100%;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}
.nav-top{border-top:1px solid #5895d5;border-bottom:1px solid #3b92e9;background:#459df5;}
.nav-content{position:absolute;width:80%;left:10%;}
.nav-content-box{position:absolute;top:0;left:0;width:100%;}
.nav-content-box>li{float:left;line-}
.nav-content-box>li:hover{background:#19508b;}
.nav-content-box>li>span>a{display:block;width:100%;margin:0;line-}
.nav-content-box>li:hover>span>a{background:#338ce6;}
ul>li.index,ul>li.cat,ul>li.special,ul>li.user,ul>li.cooperation,ul>li.mobile{}
ul>li.index{}
ul.nav-content-box>li>ul{border-right:solid 1px #3a6fa2;margin:10px 0 6px}
ul.nav-content-box>li>ul:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}
ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}
ul.nav-content-box>li.cat>ul>li{width:49%;}
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}