左侧与顶部导航的实现
左侧导航
<!doctype html> <html> <head> <title>左侧导航</title> /*<link rel ="shortcut icon" type="images/x-icon" href="2.jpg" > 用于改变图标*/ <style> *{margin:0;padding:0;} ul{ position:relative; margin:100px; width:250px; list-style:none; border:1px solid red; } ul li{ height:40px; line-height:40px; font-size:14px; font-size:#ccc; background:rgba(0,0,255,0.5); text-indent:lem; } ul li:hover{/*鼠标上去之后的操作*/ background:red; } ul li:hover div{ display:block; } ul li div{ display:none;/**/ position:absolute; top:0px; left:250px; height:600px; width:600px; background:rgb(0,255,0); } </style> </head> <body> <ul> <li>1<div> 1 </div></li> <li>2<div> 2 </div></li> <li>3<div> 3 </div></li> <li>4<div> 4 </div></li> <li>5<div> 5 </div></li> <li>6<div> 6 </div></li> </ul> </body> </html>
顶部导航
<!doctype html> <html> <head> <title>顶部导航</title> <style> *{margin:0;padding:0;} ul{ margin:100px; height:40px; line-height:40px; width:600px; list-style:none; border:1px solid red; } ul li{ float:left; position:relative; width:100px; font-size:14px; font-size:#ccc; background:rgba(0,0,255,0.5); text-indent:center; } ul li:hover{/*鼠标上去之后的操作*/ background:red; } ul li:hover div{ display:block; } ul li div{ display:none;/**/ position:absolute; top:90px; left:0px; height:300px; width:100px; background:rgb(0,255,0); } ul li div:after{ position:absolute; top:-50px; left:0px; content:""; width:0px; height:0px; border:50px solid transparent; /*transparent透明*/ border-bottom-color:red; } </style> </head> <body> <ul> <li>1<div> 1 </div></li> <li>2<div> 2 </div></li> <li>3<div> 3 </div></li> <li>4<div> 4 </div></li> <li>5<div> 5 </div></li> <li>6<div> 6 </div></li> </ul> </body> </html>