                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /css定位 position

自己寫的不知道怎么樣

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style?type="text/css">
????????*{
????????????margin:?0;
????????????padding:?0;
????????????font-size:?16px;
????????????font-family:?"微軟雅黑";
????????}
????????.nav{
????????????width:?130px;
????????????height:?auto;
????????????background:?fuchsia;
????????????position:?fixed;
????????????top:?50%;
????????????margin-top:?-100px;
????????????left:?0;
????????????cursor:?pointer;
?????????}
????????.nav-l{
????????????text-align:?center;
????????????line-height:?30px;
????????????font-size:?16px;
????????????border-bottom:?1px?solid?red;
????????}
????????.nav-l?li{
????????????width:?130px;
????????????height:?30px;
????????????list-style:?none;
????????????background:?#fe5e00;
????????????border-bottom:?1px?green?dashed;
????????????display:?none;
????????????position:?relative;
????????}
????????.nav-l:hover?li{
????????????display:?block;
????????}
????????.nav-q?{
????????????width:?130px;
????????????height:?auto;
????????????position:?absolute;
????????????left:?130px;
????????????top:?0;
????????????display:?none;
????????}
????????.nav-q?li{
????????????list-style:?none;
????????????background:?darkcyan;
????????????width:?130px;
????????????height:?30px;
????????????line-height:?30px;
????????}
????????.nav-l?li:hover?.nav-q{
????????????display:?block;
????????}
????</style>
</head>
<body>
????<div?class="nav">
????????<div?class="nav-l">
????????????慕課網
????????????<ul>
????????????????<li>
????????????????????第二階層
????????????????????<div?class="nav-q">
????????????????????????<ul>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????</ul>
????????????????????</div>
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????????<div?class="nav-q">
????????????????????????<ul>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????</ul>
????????????????????</div>
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????????<div?class="nav-q">
????????????????????????<ul>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????????<li>第三階層</li>
????????????????????????</ul>
????????????????????</div>
????????????????</li>
????????????</ul>
????????</div>
????????<div?class="nav-l">
????????????慕課網
????????????<ul>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????</ul>
????????</div>
????????<div?class="nav-l">
????????????慕課網
????????????<ul>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????</ul>
????????</div>
????????<div?class="nav-l">
????????????慕課網
????????????<ul>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????</ul>
????????</div>
????????<div?class="nav-l">
????????????慕課網
????????????<ul>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????????<li>
????????????????????第二階層
????????????????</li>
????????????</ul>
????????</div>
????</div>
</body>
</html>