                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

大神幫我看看怎么做到二級列表和三級列表隱藏，然后鼠標經過和點擊狀態展示出來！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

.list_top{
??? width:200px;
??? height:200px;
??? margin:10px auto;
??? padding:10px;
??? background:#ccc;
}

.list_top li{
??? list-style-type:none;
??? font-size:18px;
}

span{
??? background-color:#999;
??? border-radius:15%;
??? line-height:20px;
}

.top1 li{
??? font-size:16px;
}

.top2 li{
??? font-size:14px;
}

.list_top a{
??? text-decoration:none;
??? color:black;
}

.list_top li:hover,.list_top li:active{
??? cursor:pointer;
??? font-size:20px;
}

</style>
</head>

<div class="list_top">
??? <ul>
??????? <li><a href="#" target="_blank"><span>首頁</span></a></li>
??????? <li><span>課程中心</span>
??????????? <ul class="top1">
??????????????? <li><span>Web前端</span>
??????????????????? <ul class="top2">
??????????????????????? <Li><a href="#" target="_blank"><span>HTML</span></a></Li>
??????????????????????? <li><a href="#" target="_blank"><span>CSS</span></a></li>
??????????????????????? <Li><a href="#" target="_blank"><span>JavaScript</span></a></Li>
??????????????????????? <li><a href="#" target="_blank"><span>jQuery</span></a></li>
??????????????????? </ul>
??????????????? </li>
??????????????? <li><a href="#" target="_blank"><span>Android開發</span></a></li>
??????????????? <li><a href="#" target="_blank"><span>PHP開發</span></a></li>
??????????? </ul>
??????? </li>
??? </ul>
</div>
</body>
</html>