本文将使用css+html+js实现横向菜单。具有多级弹出菜单下拉。

首先我们来看看效果图：

首先应该写html部分的代码，代码比較简单，代码例如以下：

        
     
      
      
        
       
首页
        
       
网页版式          
        
            
         
自适应宽度
            
         
固定宽度
          
        
        
                
       
web教程          
        
            
         
新手入门
            
         
视频教程
            
         
常见问题
          
        
        
                
       
web实例
        
       
经常使用代码
      
      
    
     
                
     
      
      
         
       
软件project           
        
            
         
java ee
            
         
c
           
        
         
                  
       
程序语言           
        
            
         
android
            
         
java
           
        
         
               
      
    
     
              

接着写css的代码，代码中都有凝视，方便阅读和理解：

完毕上面的步骤后，能够进行測试了，你会发现，上面的代码仅仅在谷歌浏览器能够操作正常。能够实现下拉菜单。可是在ie和其它的浏览器，不能正常使用下拉菜单，浏览器不兼容引起的，所以为了写出兼容全部浏览器的菜单，还需js代码的控制。js代码例如以下；

" ": "") + "sfhover"; }; sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; }; sfEls[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } for (var i=0; i<sfEls2.length; i++) { sfEls2[i].οnmοuseοver=function() { this.className+=(this.className.length>0?

" ": "") + "sfhover"; }; sfEls2[i].onMouseDown=function() { this.className+=(this.className.length>0?

" ": "") + "sfhover"; }; sfEls2[i].onMouseUp=function() { this.className+=(this.className.length>0?

" ": "") + "sfhover"; }; sfEls2[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); }; } } window.οnlοad=menuFix; </script>

如今就能够执行正常了，会出现本文開始显示的效果，因为是做測试的，所以有些css代码没有去掉，主要是方便调试