CSS实现下拉列表功能

最新推荐文章于 2024-08-24 09:00:00 发布

在努力敲代码啦

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量419

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_62953185/article/details/128137851

版权

一

先写好ul和li的标签

<ul>
    <li>产品
        <ul>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ul>
    </li>
</ul>

二

定义CSS样式

.b1{
    display:block;    
}
.b2{
    display:none;
}
.b1:hover .b2{
    display:block;   
}

三

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
    .b1{
		display:block;
	}
	.b2{
		display:none;
	}
	.b1:hover .b2{
		display:block;
	}
    </style>
</head>
<body>
        <ul class="b1">
                <li>产品
                    <ul class="b2" >
                        <li>一</li>
                        <li>二</li>
                        <li>三</li>
                    </ul>
                </li>
        </ul>
</body>
</html>