让我们来实现一个css三级导航
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
li{list-style: none;}
.menu ul { margin: 0px; padding: 0px; width: 50%; height: 30px; background-color: #cccccc; color: #ffffff; text-align: center; }
.menu ul li { position: relative; margin-left: 0px; padding-top: 10px; padding-left: 0px; height: 20px; width: 20%; border: none; float: left; }
.menu ul li ul { visibility: hidden; width: 80%; position: absolute; top: 30px; left: 10%; }
.menu ul li ul li { width: 100%; float: none; height: 25px; padding-top: 3px; padding-bottom: 3px; position: relative; }
.menu ul li ul li ul { visibility: hidden; position: absolute; left: 100%; top: 0px; width: 80%; }
.menu ul li:hover ul li ul { visibility: hidden; }
.menu ul li ul li:hover ul { visibility: visible; background-color: #666666; color: #000000; }
.menu ul li ul li:hover ul li { background-color: #666666; color: #000000; }
.menu ul li:hover { background-color: #999999; }
.menu ul li:hover ul { visibility: visible; }
123456789101112131415161718更多请见：https://blog.csdn.net/weixin_44519496/article/details/120152767
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
