用纯CSS实现鼠标经过后出现下拉菜单,实例讲解

2024-01-17 13:58 小编
   HTML部分:
    1、我们可以使用任何的HTML元素来打开下拉菜单,如:<span>或a<button>元素
    2、使用容器元素(例如<div>)来创建下拉菜单的内容,并放在任何你想放的位置上。
    3、使用<div>元素来包裹这些元素,并使用CSS来设置下拉内容的样式。
    CSS部分:
    1、.dropdown使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。
    2、.dropdown-content中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。注意:如果你想设置下拉内容与下拉按钮的宽度一致,可设置width为100%。
    3、:hover选择器用于将鼠标移动到下拉按钮上时显示下拉菜单。
    实例:用纯CSS做一个导航下拉菜单,当鼠标经过时出现下拉菜单
    HTML代码:
    <p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
    <divclass="dropdown">
    <buttonclass="dropbtn">下拉菜单</button>
    <divclass="dropdown-content">
    菜单1
    菜单2
    菜单3
    </div>
    </div>
    CSS部分:
    .dropbtn{
    background-color:#4CAF50;
    color:white;
    padding:16px;
    font-size:16px;
    border:none;
    cursor:pointer;
    }
    .dropdown{
    position:relative;
    display:inline-block;
    }
    .dropdown-content{
    display:none;
    position:absolute;
    background-color:#f9f9f9;
    width:100%;;
    box-shadow:0px8px16px0pxrgba(0,0,0,0.2);
    }
    .dropdown-contenta{
    color:black;
    padding:12px16px;
    text-decoration:none;
    display:block;
    }
    .dropdown-contenta:hover{
    background-color:#f1f1f1
    }
    .dropdown:hover.dropdown-content{
    display:block;
    }
    .dropdown:hover.dropbtn{
    background-color:#3e8e41;
    }


在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码