教你玩转CSS 下拉菜单

目录

基本下拉菜单

实例解析

下拉菜单

下拉内容对齐方式

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

  

   

    

     

    
    

     
 <style>
     
    
   

    

     

    
    

     
 .dropdown {
     
    
   

    

     

    
    

     
 position: relative;
     
    
   

    

     

    
    

     
 display: inline-block;
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 .dropdown-content {
     
    
   

    

     

    
    

     
 display: none;
     
    
   

    

     

    
    

     
 position: absolute;
     
    
   

    

     

    
    

     
 background-color: #f9f9f9;
     
    
   

    

     

    
    

     
 min-width: 160px;
     
    
   

    

     

    
    

     
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     
    
   

    

     

    
    

     
 padding: 12px 16px;
     
    
   

    

     

    
    

     

    
  
 

文章来源: sunmenglei.blog.csdn.net，作者：孙叫兽，版权归原作者所有，如需转载，请联系作者。

原文链接：sunmenglei.blog.csdn.net/article/details/107525653