huanggr
不使用js制作的二级导航菜单
不使用js制作的二级导航菜单-html结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>不使用js制作的二级导航菜单</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <ul class="nav clearfix"> <li><a href="#">首 页</a></li> <li><a href="#">学校概况</a> <ol class="nav_list"> <li><a href="#">学校概况</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">学校概况</a></li> <li><a href="#">学校概况</a></li> </ol> </li> <li><a href="#">机构设置</a> <ul class="nav_list"> <li><a href="#">机构设置</a></li> <li><a href="#">机构设置</a></li> <li><a href="#">机构设置</a></li> <li><a href="#">机构设置</a></li> </ul> </li> <li><a href="#">科学研究</a></li> <li><a href="#">学科建设</a></li> <li><a href="#">招生就业</a></li> <li><a href="#">研训工作</a></li> <li><a href="#">专题专栏</a></li> </ul> </body> </html> |
不使用js制作的二级导航菜单-css样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .clearfix:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } li { list-style: none; } a { text-decoration: none; color: black; font-size: 16px; } .nav { width: 1070px; height: auto; margin: 0 auto; background: pink; } .nav > li { position: relative; height: auto; background: yellow; float: left; } .nav > li:hover .nav_list { display: block; } .nav > li .nav_list { display: none; position: absolute; left: 0; } .nav > li a { width: 100%; height: 100%; display: block; padding: 0px 23px; line-height: 46px; box-sizing: border-box; text-align: center; } .nav > li a:hover { background: blue; color: #fff; } .nav .nav_list li a { background: #ccc; } .nav .nav_list li a:hover { background: blue; color: #000; } |
7