css制作鼠标移入出现下拉列表（css鼠标移入显示）

CSS制作鼠标移入出现下拉列表是一种常见的网页设计效果。下面我们就来学习一下如何使用CSS实现这种效果。

ul class="menu">
    li>
    主页/li>
    li>
    产品ul class="submenu">
    li>
    产品1/li>
    li>
    产品2/li>
    li>
    产品3/li>
    /ul>
    /li>
    li>
    关于我们ul class="submenu">
    li>
    公司简介/li>
    li>
    团队成员/li>
    li>
    联系我们/li>
    /ul>
    /li>
    li>
    新闻动态/li>
    /ul>
    

首先我们在HTML中定义一个& l; tul> 列表，其中有一个& l; i> 作为一级导航，有一个& l; ul> 作为二级导航。

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu li {
    display: inline-block;
    position: relative;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
.menu li:hover .submenu {
    display: block;
}
    

接下来，我们在CSS样式中定义二级菜单的样式，将其‘display’属性设置为‘none’，当鼠标悬停在一级菜单上时，通过‘:hover’伪类将二级菜单的‘display’属性设置为‘block’，从而实现鼠标移入出现下拉列表的效果。

最后，通过设置‘position’属性，可以使二级菜单的位置相对于一级菜单进行定位。

通过以上步骤，我们就成功地使用CSS实现了鼠标移入出现下拉列表的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！