让我们来实现一个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; }

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/120152767

 

posted @ 2022-08-09 19:00  忘川信使  阅读(87)  评论(0)  编辑  收藏  举报