纯html+css垂直导航栏代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}ol li{list-style-type: none;}.a1{width: 300px;background-color: blanchedalmond;}.a1 li{width: 300px;height: 30px;line-height: 30px;background-color: blanchedalmond;}.a1 li:hover{background-color: rgb(221, 145, 32);}.a2{width: 300px;margin-left: 300px;margin-top: -30px;display: none;}.a2 li,.a3 li,.a4 li,.a5 li,.a6 li{background-color: blueviolet;}.a2 li:hover{background-color: rgb(152, 138, 166);}.a1 li:hover ol{display: block;}.a3{width: 300px;margin-left: 300px;margin-top: -60px;display: none;}.a4{width: 300px;margin-left: 300px;margin-top: -90px;display: none;}.a5{width: 300px;margin-left: 300px;margin-top: -120px;display: none;}.a6{width: 300px;margin-left: 300px;margin-top: -150px;display: none;}</style></head><body><ol class="a1"><li>一级导航<ol class="a2"><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li></ol></li><li>一级导航<ol class="a3"><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li></ol></li><li>一级导航<ol class="a4"><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li></ol></li><li>一级导航<ol class="a5"><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li></ol></li><li>一级导航<ol class="a6"><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li><li>二级导航</li></ol></li></ol></body></html>
