纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）

纯html+css实现点击弹出式导航栏菜单（采用：target和display：none）

搜索了很久，发现都没有纯html+css的点击式导航栏，要么是采用：hover的划过式导航栏，要么使用Javascript实现的点击式导航栏，遂着手研究了一下。这个导航栏是点击出二级导航，鼠标移走不缩回，直到点击别的一级导航栏，而且无法创建三级或以后级导航栏，而且点击别处也不缩回。暂且到此为止，有空再进一步强化下。

一、首先是使用到的技术：

1、display：none和display：block；

2、：target；

二、原理：

1、先用display：none隐藏二级导航栏；

2、一级导航栏内锚定二级导航栏id；

3、：target选择器改变二级导航栏display属性为block使二级导航栏显示出来；

三、过程：

1、先放上全部style和body

    


    

        

          
导航一
            

                
二级导航
                
二级导航
                
二级导航
                
二级导航
            
        
        
导航二
            

                
二级导航
                
二级导航
                
二级导航
            
        
        
导航三
            

                
二级导航
                
二级导航
            
        
        
导航四
            

                
二级导航
            
 
        
    
  

2、display隐藏部分

    nav ul ul {
        display:none;
    }

3、锚定部分

          
导航一
            

4、：target事件改变属性部分

    #target_1:target, #target_2:target, #target_3:target, #target_4:target {
      display: block;     
  }

本文为作者在互联网上多方寻找资料后尝试完成的作品，如有侵权请联系作者本人（微信：13148875484）删除，支持转载，支持不署名转载。