mui開發記錄（十一）二級導航欄

效果圖

html代碼

<div class="head-nav" style="margin-bottom: 1px; ">
					<div class="head-nav-con clearFloat">
						<ul>
							<li class="drop-down" style="border-bottom: 3px solid #007AFF;"><a href="index.html" style="color: #007AFF;">首頁</a>
								<ul class="drop-down-content">
									<li><a href="active.html">動態</a></li>
									<li><a href="#">故事</a></li>
									<li class="drop-down-2"><a href="#">人物</a>
										
									</li>
								</ul>
							</li>
							<li class="drop-down" ><a href="#" >組織機構</a></li>
							<li class="drop-down" ><a href="#" >文件制度</a>
								<ul class="drop-down-content">
									<li><a href="#">通知公告</a></li>	
								</ul>
							</li>
							<li class="drop-down" ><a href="#" >工作動態</a></li>
							<li class="drop-down" ><a href="#" >榜樣引領</a>
								<ul class="drop-down-content-2">
									<li><a href="#">師德風采</a></li>
								</ul>
							</li>
							<li class="drop-down" ><a href="#" >師德故事</a></li>
							<li class="drop-down" ><a href="#" >他山之石</a></li>
							<li class="drop-down"><a href="#">在線學習</a>
								<ul class="drop-down-content">
									<li><a href="#">學習資料</a></li>
									<li><a href="#">師德講堂</a></li>
								</ul>
							</li>
							<li class="drop-down" ><a href="#" >師德監督</a></li>
						</ul>
					</div>
				</div>

css樣式

*bar*/
ol,
        ul,
        li {
            list-style: none;
        }
        .head-nav {
            width: 100%;
            height: 60px;
            background: white;
        }
        .head-nav-con {
            width: 100%;
            height: 60px;
            margin: auto;
        }
        .head-nav-con ul li {
            width: 11%;
            float: left;
            font-size: 18px;
            text-align: center;
        }
		.head-nav-con ul li a {
			color: #000000;
			font-size: 18px;
			font-family: SourceHanSansSC-regular;
		}
        .head-nav-con ul li a:hover {
            color: #007AFF;
        }
        .head-nav-con ul a {
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .head-nav-con .drop-down {
            position: relative;
			
        }
        .head-nav-con .drop-down-content {
            padding: 0;
            display: none;
            position: absolute;
            z-index: 2;
            background: rgba(34,34,34,0.8);
        }
		.head-nav-con .drop-down-content li {
			width:100% ;
		}
		.head-nav-con .drop-down-content li a{
			color: white;
		}
        .head-nav-con .drop-down-content li:hover > a {
            background-color:#007AFF;
			color: white;
        }
        .head-nav-con .drop-down:hover .drop-down-content {
            display: block;
			width: 100%;
        }
        .head-nav-con .drop-down-2 {
            position: relative;
        }
        .head-nav-con .drop-down-content-2 {
            padding: 0;
            display: none;
            position: absolute;
            z-index: 1;
            background-color:  rgba(34,34,34,0.8);
            right: -170px;
            top: 0;
        }
        .head-nav-con .drop-down-content-2 > li {
            float: none;
            background-color:  rgba(34,34,34,0.8);
        }
        .head-nav-con .drop-down-content-2 li:hover a {
            background-color: #007AFF;
        }
        .head-nav-con .drop-down-2:hover .drop-down-content-2 {
            display: block;
        }

mui