<pre><!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="Author" content="一只豬">
<title>Document</title>
<style type="text/css">
a{
text-decoration:none;
color:#333;
}
body,ul,li{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
body{
font:14px/1.5 '微軟雅黑';
}
nav{
background:#ccc;
height:50px;
line-height:50px;
margin-top:40px;
}
nav>ul>li{
position:relative;
float:left;
margin-left:25px;
}
nav>ul>li>a{
display:block;
height:50px;
padding:0 20px;
}
nav>ul>li>a:hover{
background:white;
border:1px solid black;
border-bottom:none;
}
nav>ul>li:hover .child{
display:block;
}
nav .child{
position:absolute;
background:white;
left:0px;
top:50px;
line-height:20px;
padding:10px;
display:none;
width:48px;
height:80px;
border:1px solid black;
border-top:none;
}
nav .child li{
margin-top:5px;
}
.fix:after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="nav" class="fix">
<ul>
<li>
<a href="#">林總</a>
<ul class="child">
<li><a href="#">好人</a></li>
<li><a href="#">賊好</a></li>
<li><a href="#">非常</a></li>
</ul>
</li>
<li>
<a href="#">就是</a>
<ul class="child">
<li><a href="#">好人</a></li>
<li><a href="#">賊好</a></li>
<li><a href="#">非常</a></li>
</ul>
</li>
<li><a href="#">就是</a></li>
<li><a href="#">你爸</a></li>
</ul>
</div>
</body>
</html>
