html css js 菜單欄

清明節已過，開始努力工作學習！
!DOCTYPE html>

• 註冊藍軌跡培訓中心

  WEB前端、後端、移動端、微信開發

• 尋找更多好課

  WEB前後端基礎課、進階課、高級課

• 今日最新優秀課程

  每日更新更多、更優秀的開發課

• 我學習過的課程

  我愛學、我學過、我喜歡的課程

• 每日好禮優惠多

  每日不同的優惠、不同的學習禮包奉送

css部分 ul{ padding: 0; margin: 0; list-style: none; } div#nav-menu{ width: 500px; margin: 200px auto; } h1,h2,h3,h4,h5,h6,p{ font-weight: normal; margin: 0; } div#nav-menu ul li{ width: 100%; height: 100px; border-left: 10px solid #000; box-shadow: 1px 2px 3px #666; margin-top: 5px; box-sizing: border-box; transition: all 0.3s linear; } div#nav-menu ul li a{ display: block; width: 100%; height: 100%; } div#nav-menu ul li a div{ float: left; box-sizing: border-box; } div#nav-menu ul li a div.left{ width: 100px; height: 100%; text-align: center; line-height: 100px; } div#nav-menu ul li a div.left span{ color: #000; font-size: 25px; transition: all 0.3s linear; } div#nav-menu ul li a div.right{ width: 390px; height: 100%; padding: 20px 30px 20px 0; } div#nav-menu ul li a div.right h3{ color: #000; transition: all 0.3s linear; } div#nav-menu ul li a div.right p{ color: #666; font-size: 14px; margin: 7px; transition: all 0.3s linear; } div#nav-menu ul li:hover{ border-color: #FBD04F; background-color: #000; } div#nav-menu ul li:hover a div.left span.fa{ color: #FBD04F; transform: scale(2); } div#nav-menu ul li:hover a div.right h3{ font-size: 14px; color: #fff; } div#nav-menu ul li:hover a div.right p{ font-size: 20px; color: #FBD04F; }

CSS3帶過渡動畫特效的垂直導航菜單怎麽寫？