                        课程
                    
                        /前端开发
                        
                            /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>