css3三级下拉导航

最新推荐文章于 2023-07-24 18:57:47 发布

啊哈前端

最新推荐文章于 2023-07-24 18:57:47 发布

阅读量777

点赞数 1

分类专栏： css3 文章标签： css3 三级导航

本文链接：https://blog.csdn.net/wuzhe128520/article/details/49494465

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css导航</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{margin: 0;padding: 0;}
    body {
        font: 12px/16px 'Microsoft yahei,微软雅黑';
        color: #fff;
       box-sizing: border-box;
    }
    .container {
        width: 800px;
        margin: 0 auto;
    }
    ul li {
        list-style-type: none;
        text-align: center;


    }
    ul li:hover {
        cursor: pointer;
    }
    nav {
        
        background: #000;
    }
    nav  .ul-all {
        width: 770px;
        margin: 0 auto;
        height:  45px;
    }
    nav  .ul-all::before,nav  .ul-all::after {   //清除浮动
        content:"";
        display: table;
        clear: both;
        height: 0;
        zoom: 1;
    }
    nav .ul-all>li {
        float: left;
        width: 150px;
        transition: background 1s;
        line-height: 45px;
        position: relative;
        margin: 0 2px;
    }
    nav .ul-all>li:hover {
        cursor: pointer;
        background: #fff;
        color: #000;
    }
    nav .ul-all>li ul {
        position: absolute;
        display: none;
        width: 100%;
        z-index: 9999;    //避免下面绝对定位的div挡住
    }
    nav .ul-all>li:hover ul { //当鼠标移动到第一行的li时，将其下面的ul设置为显示(即显示二级导航)
        display: block;
    }
    nav .ul-all>li ul {
        background: #000;

    }
    nav .ul-all>li ul>li {
        color: #fff;
        
    }
    nav .ul-all>li ul>li:hover{
        color: #000;
        background: #fff;
        
    }
    nav .ul-all .ul-2 li {
        position: relative;
    }
    nav .ul-all .ul-2 li>.ul-3 {
        display: none;
        position: absolute;
        left: 150px;
        top: 0;
        background: #000;
        color: black;
        z-index: 9999; //避免下面绝对定位的div挡住

    }
    nav .ul-all .ul-2 li:hover .ul-3{ //当鼠标移动到第二行的li时，将其下面的ul设置为显示(即显示第三级导航)
        display: block;
    }
    .ul-2 li,.ul-3 li {
        border-bottom: 1px solid #000;
    }
    .ul-2 li,.ul-3 li:first-child{
        border:0;
    }
    .content {
        width:100%;
        height: 500px;
        border: 1px solid #ef6677;
        border-top: none;
        position: relative;
    }
    .tit {        
        height: 120px;
        font-size: 60px;
        line-height: 60px;
        text-indent: 2em;
        position: absolute;
        text-shadow: 5px 5px 6px  #ef6677,4px 4px 3px  #556677,3px 3px 3px  #446677,2px 2px 3px  #336677,1px 1px 3px  #226677; //参数:x轴  y轴 模糊距离 颜色
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>
</head>
<body>
<div class="container">
   <nav class="navigator">
       <ul class="ul-all">
       <li>主页</li>
       <li>日志
           <ul class="ul-2">
               <li>公开日志
            <ul class="ul-3">
            <li>好友分享</li>
            <li>独自享受</li>
            </ul>
               </li>
               <li>私密日志</li>
           </ul>
       </li>
       <li>说说
    <ul class="ul-2">
        <li>心情</li>
        <li>记录</li>
    </ul>
       </li>
       <li>相册</li>
       <li>其他</li>
       </ul>
   </nav>
   <main class="content">
       <div class="tit">努力到无能为力，拼搏到感动自己!</div>
   </main>
   </div>
</body>

</html>

  本人新手，使用博客记录自己学习情况，其中有很多不足之处，希望大家批评指正，在此先谢过啦！