freelover19
2018-02-04 10:57
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Nav-bar</title> <style> *{ padding: 0; margin: 0; } .page{ width: 100%; height: 3000px; background: url("mooc.png") center top no-repeat; } .nav{ width:160; height:auto; position: fixed; left:0; top: 50%; margin-top:-103px; font-family: 'Miscrosoft YaHei' } .nav-li{ width: 160px; height: 40px; border-bottom: 1px solid #fff; background: #333; text-align: center; line-height: 40px; color: #fff; font-size: 16px; } .tit{ width: 160px; height: 40px; } .nav-li ul{ width: 160px; height: auto; background: #fff; } .nav-li ul li{ width: 160px; height: 40px; border-bottom: 1px dashed #666; color: #333; text-align: center; line-height: 40px; } </style> </head> <body> <div class="page"> <div class="nav"> <div class="nav-li"> <div class="tit">网站导航</div> <ul> <li> 二级导航 </li> </ul> </div> <div class="nav-li">网站导航</div> <div class="nav-li">网站导航</div> <div class="nav-li">网站导航</div> <div class="nav-li">网站导航</div> </div> </div> </body> </html>
.nav-li{
height:auto;
}
这里要改为auto长度才能显示。
Css最后一行少一个position呀
display:none 1)先设置隐藏
*****:hover ul{ display:block;} 2)在设置鼠标时显示
3)看视频别快进
css定位 position
49036 学习 · 95 问题
相似问题