<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航</title>
<style type="text/css">
#header{
width:980px;
height:200px;
margin-left:5%;
}
#nav{
width:980Px;
margin-left:5%;
}
#nav1{
background-color:#0F9BA6;
margin-left:0px;
text-align:center;
}
#nav1 li {
display:inline-block;
width:120px;
text-align:center;
color:#ffffff;
list-style:none;
margin-left:10px;
border-right:dashed 1px #000000;
}
#nav1 li a:hover{
background-color:#6F9B99;
}
#nav1 li {
color:#ffffff;
font-size:18px;
/* text-decoration:none; */
}
a{
text-decoration:none;
}
dl{
position:absolute;
display:block;
}
/* li > a{
position:relative;
} */
li:hover dl{
margin-top: 0;
display:block;
}
dd{
display:none;
}
li:hover dd{
display:block;
}
#nav3{
background-color: aqua;
}
</style>
</head>
<body>
<div id="header">
<img src="img/banner.jpg" width="980" height="200"/>
</div>
<div id="nav">
<ul id="nav1">
<li><a href="#">Home</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">images</a></dd>
<dd><a href="">files</a></dd>
</dl>
<li><a href="#">HTML</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">HTML4</a></dd>
<dd><a href="">HTML5</a></dd>
<dd><a href="">XML</a></dd>
</dl>
</li>
<li><a href="#">CSS</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">css3</a></dd>
<dd><a href="">DIV</a></dd>
</dl>
</li>
<li><a href="#">JavaScript</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">BOM</a></dd>
<dd><a href="">DOM</a></dd>
</dl>
</li>
<li><a href="#">jQuery</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">mobile</a></dd>
<dd><a href="">files</a></dd>
</dl>
</li>
<li><a href="#">about</a>
<dl id="nav3">
<dt></dt>
<dd><a href="">W3C</a></dd>
<dd><a href="">Web</a></dd>
<dd><a href="">more</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>利用css实现二级导航
猜你喜欢
转载自blog.csdn.net/qq_43090158/article/details/82317879
今日推荐
周排行