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;

    }