W3.CSS 下拉菜单

下拉菜单是交互式网站最重要的部分之一。下拉菜单是菜单项的集合，允许用户从列表中选择一个值。 W3.CSS 还提供了类来制作平滑且响应迅速的下拉菜单。有两种类型的下拉菜单可用，即可悬停和可点击。可用于下拉的类如下：

Sr. No.	Class Name	Description
1.	w3-dropdown-content	It is used to make the content of the dropdown menu.
2.	w3-dropdown-hover	It is used to make a hoverable dropdown element.
3.	w3-dropdown-click	It is used to make a clickable dropdown menu.

示例：创建一个可悬停的下拉菜单。

HTML

  

  
    
    

  

  
    
    
    

        
        
        
GeeksForGeeks
    
      
    
    

        
        

            
                Hover Over Me!
            
            

                
                    Gfg
                
                
                    GeeksForGeeks
                
                
                  Geek
              
            
        
    

  

输出：

• 悬停前：

• 悬停后：

示例：创建可点击的下拉菜单。

HTML

  

  
    
    
      
    
    
        function show() {
          var x = document.getElementById("gfg");
          if (x.className.indexOf("w3-show") == -1) { 
            x.className += " w3-show";
          } else {
            x.className = x.className.replace(" w3-show", "");
          }
        }
    

  

    
    
    
        
        
        
          GeeksForGeeks
      
    
      
    
    
        
        
            
                Click Me!
            
  
            
                Gfg
                
                    GeeksForGeeks
                
                Geek
            
        
    

  

输出：

• 点击前：

• 点击后：