HTML+CSS簡單實現導航欄二級下拉菜單

時間 2020-03-08

標籤 html+css html css 簡單實現導航二級下拉菜單欄目 CSS 简体版

原文原文鏈接

在這裏我用的工具是Hbuilder~css

參考代碼以下：html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
.clearfix::after{
content: "";
display: block;
clear: both;
}
.header{
display: block;
color: white;
width: 100%;
height: 60px;
line-height: 60px;
background: darkseagreen;
margin-top:-16px ;

}
.container{
width: 1500px;
}
.header .topnav>li{
float: left;
margin: 0 20px;
font-size: 18px;
width:150px;
list-style-type: none;
text-align: center;
box-sizing: border-box;
position: relative;
}
.header .topnav>li a{
text-decoration: none;
color: #F4F4F4;
}
.header .topnav>li a:hover{
color: #3C3C3C;
}
.header .topnav>li:hover{
background: lightsteelblue;
border: 2px solid lightsteelblue;
border-bottom: none;
line-height: 56px;
}
.header .topnav>li .homework{
text-align: left;
line-height: 1.5;
width: 300px;
display: none;
border: 2px solid lightsteelblue;
box-sizing: border-box;
position: absolute;
right: -2px;
background: lightsteelblue;
}
.header .topnav>li:hover .homework{
display: block;
}
.header .topnav>li:hover::after{
content: "";
position: absolute;
width: 100%;
height: 8px;
bottom:-2px;
left: 0;
background: lightsteelblue;

}

.homework li{
list-style-type: none;
margin-left: -40px;
}
.homework ul li:hover{
background: darkseagreen;
color: black;

}
.homework ul li a:hover{
color: black;
}
        </style>
    </head>
    <body>
        <header class="header">
            <div class="container">
        <ul class="topnav clearfix">
        <li><a href="#"target="_self" title="首頁">首頁</a></li>
        <li><a href="myself.html"target="_self"title="我的簡介">我的主頁</a></li>
        <li>
            <a href="homework.html"target="_self" title="個人做業">個人做業</a>
            <div class="homework">
                <ul>
                    <li><a href="chuqiaozhuan.html"target="_blank">楚喬傳</a></li>
                    <li><a href="four_famous.html"target="_blank">四大名著</a></li>
                    <li><a href="baidu.html"target="_blank">百度效果</a></li>
                    <li><a href="fiction_form.html"target="_blank">小說排行榜</a></li>
                    <li><a href="register_form.html"target="_blank">註冊頁面</a></li>
                    <li><a href="homework.html"target="_blank">更多...</a></li>
                    
                </ul>
            </div>
        </li>
        <li>
            <a href="https://mp.weixin.qq.com/s/R531xjLbywGxTbkPLeBTnA"target="_blank"title="待開發">原創文章</a>
        </li>
        <li>
            <a href="https://www.cnblogs.com/YC-Yanchu/"target="_blank"title="個人博客">個人博客</a>
        </li>
       </ul>
        </div>
        </header>
    </body>
    
</html>

！！在這裏解釋一下小疑點：工具

1.凡是用到浮動第一個就要想到清除浮動這個代碼ui

.clearfix::after{

content: "";

display: block;

clear: both;

}

2.這裏用到了僞元素：:after 是爲了遮住下拉菜單的上邊框露出來的部分，固然我這裏能夠不須要這一步，由於我設置下拉菜單的邊框的顏色和背景顏色同樣，而且背景顏色和一級菜單hover後顯示的顏色同樣，因此不須要設置僞元素來隱藏掉。spa


.header .topnav>li:hover::after{
content: "";
position: absolute;
width: 100%;
height: 8px;
background: green;
bottom:-2px;
left: 0;
background: lightsteelblue;

}

好比說設置了下拉菜單的邊框爲別的顏色，這裏以黑色爲例，看效果圖，你會發現「個人做業」的下邊框那裏的黑色邊框不見了，這就是利用了僞元素:after來將它遮住了，其實它仍是在的呢。3d

其餘的就不一一解釋啦，若是有疑問的話就在評論裏留言吧，必定會回覆的！感謝讀者的支持！code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。