<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" target="_blank" rel="external nofollow" />
</head>
<body>
<ul id="menu">
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >good</a>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >nice</a>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >handsome</a>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</li>
<li>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >cool</a>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</li>
</ul>
</body>
</html>
css 檔案
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/* 後代選擇器 */
li a{
color: #434343;
text-decoration: none;
}
#menu{
width: 200px;
margin: 50px;
}
#menu li{
font-size: 14px;
}
/* 子選擇器 */
#menu>li{
background-color:blanchedalmond;
line-height: 24px;
text-indent: 60px;
}
#menu ul{
display: none;
}
#menu ul li{
text-indent: 30px;
}
#menu>li:hover ul{
display: block;
}
![沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)