abstract：摘要： 運(yùn)用display屬性設(shè)置下拉菜單 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>
摘要：
運(yùn)用display屬性設(shè)置下拉菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0;}
body{
background: lightgray;
}
.page{
margin: 20px auto;
width: 600px;
background: lightcyan;
height: 1000px;
}
.nav>li{
float: left;
width: 150px;
text-align: center;
background: darkmagenta;
padding: 0px;
color: lightgrey;
line-height:50px;
}
ul{
list-style: none;
}
.dropdown-content{
display: none;
background: #0aa6ec;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</head>
<body>
<div class="page">
<ul class="nav">
<li>首頁(yè)</li>
<li class="dropdown">新聞
<ul class="dropdown-content">
<li>國(guó)際新聞</li>
<li>國(guó)內(nèi)新聞</li>
</ul>
</li>
<li>產(chǎn)品</li>
<li>聯(lián)系我們</li>
</ul>
</div>
</body>
</html>效果圖
總結(jié)：
設(shè)置下拉菜單的display屬性為隱藏，通過(guò)li的hover，更改下拉菜單的display屬性為block;
Correcting teacher：天蓬老師Correction time：2019-06-15 17:10:46
Teacher's summary：下拉菜單的實(shí)現(xiàn)手段很多的, 用腳本 是最方便的, 用css來(lái)做也可以