简单的 CSS二级下拉菜单
代码01：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>CSS二级下拉菜单</title> 7 <style> 8 body{ 9 padding:0px; 10 margin:0px; 11 } 12 .menu { 13 list-style: none; 14 padding: 0; 15 margin: 0; 16 display: flex; 17 width:100%; 18 background-color:aquamarine; 19 line-height:60px; 20 height:60px; 21 vertical-align:middle; 22 } 23 24 .menu li { 25 position: relative; 26 width: 200px; 27 text-align:center; 28 } 29 .menu li:hover{ 30 background-color:blanchedalmond; 31 } 32 33 .menu a { 34 display: block; 35 text-decoration: none; 36 color: #333; 37 } 38 39 .submenu { 40 display: none; 41 position: absolute; 42 top: 100%; 43 left: 0; 44 background-color: #ffff00; 45 border: 1px solid #ccc; 46 list-style: none; 47 padding: 0; 48 margin: 0; 49 } 50 51 .menu li:hover > .submenu { 52 display: block; 53 } 54 </style> 55 </head> 56 <body> 57 <ul class="menu"> 58 <li> 59 <a href="#">菜单1</a> 60 <ul class="submenu"> 61 <li><a href="#">子菜单1-1</a></li> 62 <li><a href="#">子菜单1-2</a></li> 63 </ul> 64 </li> 65 <li> 66 <a href="#">菜单2</a> 67 <ul class="submenu"> 68 <li><a href="#">子菜单2-1</a></li> 69 <li><a href="#">子菜单2-2</a></li> 70 </ul> 71 </li> 72 <li> 73 <a href="#">菜单3</a> 74 <ul class="submenu"> 75 <li><a href="#">子菜单3-1</a></li> 76 <li><a href="#">子菜单3-2</a></li> 77 <li><a href="#">子菜单3-3</a></li> 78 <li><a href="#">子菜单3-4</a></li> 79 </ul> 80 </li> 81 </ul> 82 </body> 83 </html>
效果图：
代码02：
1 <!DOCTYPE html> 2 <!-- saved from url=(0105)file:///C:/Users/huanhua/Desktop/css%E7%AE%80%E5%8D%95%E7%9A%84%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95.html# --> 3 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE"> 4 <style type="text/css"> 5 body{ 6 padding:0; 7 margin:0; 8 } 9 .container { 10 width: 100%; 11 height: 60px; 12 background-color: #00ffff; 13 text-align: center; 14 } 15 .containerCon { 16 width: 1000px; 17 height: 60px; 18 position: relative; 19 padding: 0; 20 margin: 0px auto; 21 } 22 .containerCon ul { 23 margin: 0px auto; 24 padding: 0px; 25 border: 0px; 26 font-size: 0px; 27 background-color: #4cff00; 28 display: block; 29 height: 60px; 30 text-align: center; 31 } 32 .containerCon ul::after { 33 content: ''; 34 display: block; 35 clear: both; 36 } 37 .containerItem{ 38 font-size:14px; 39 list-style:none; 40 display:inline-block; 41 float:left; 42 width:150px; 43 line-height:60px; 44 vertical-align:middle; 45 text-align:center; 46 position:relative; 47 } 48 .containerItem a{ 49 display:block; 50 text-decoration:none; 51 height:60px; 52 color:#000000; 53 } 54 .containerItem div{ 55 width:200px; 56 position:absolute; 57 top:60px; 58 left:50%; 59 margin-left:calc(-200px / 2 ); 60 background-color:#ff6a00; 61 height:300px; 62 display:none; 63 } 64 .containerItem div a { 65 width:100%; 66 height:60px; 67 display:block; 68 color:#000000; 69 background-color:#ffd800; 70 } 71 .containerItem div a:hover { 72 background-color: aquamarine; 73 } 74 .containerItem:hover { 75 background-color: aquamarine; 76 } 77 .containerItem:hover > div{ 78 display:block; 79 } 80 </style> 81 82 </head> 83 84 <body> 85 <div class="container"> 86 <div class="containerCon"> 87 <ul> 88 <li class="containerItem"> 89 <a href="#">菜单1</a> 90 <div> 91 <a>菜单1-子菜单1</a> 92 <a>菜单1-子菜单2</a> 93 <a>菜单1-子菜单3</a> 94 </div> 95 </li> 96 <li class="containerItem"><a href="#">菜单2</a> 97 <div> 98 <a>菜单2-子菜单1</a> 99 <a>菜单2-子菜单2</a> 100 <a>菜单2-子菜单3</a> 101 </div> 102 </li> 103 <li class="containerItem"> 104 <a href="#">菜单3</a> 105 <div> 106 <a>菜单3-子菜单1</a> 107 <a>菜单3-子菜单2</a> 108 <a>菜单3-子菜单3</a> 109 </div> 110 </li> 111 <li class="containerItem"> 112 <a href="#">菜单4</a> 113 <div> 114 <a>菜单4-子菜单1</a> 115 <a>菜单4-子菜单2</a> 116 <a>菜单4-子菜单3</a> 117 </div> 118 </li> 119 <li class="containerItem"> 120 <a href="#">菜单5</a> 121 <div> 122 <a>菜单5-子菜单1</a> 123 <a>菜单5-子菜单2</a> 124 <a>菜单5-子菜单3</a> 125 </div> 126 </li> 127 </ul> 128 </div> 129 130 </div> 131 132 </body></html>
效果图：
代码03：
1 <!DOCTYPE html> 2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-16LE"> 3 <style type="text/css"> 4 :root { 5 --childMenuBackgroundColor: #eeeeee; /** 子菜单的背景颜色 ***/ 6 --childMenuHeight: 600px; /** 子菜单的高度 ***/ 7 --childMenuWidth: 100vw; /** 子菜单的宽度 ***/ 8 --menHeight: 50px; /**** 菜单导航栏的高度 ***/ 9 --menuSelectedBackGroundColor: #e67517; /** 菜单导航选中时候的背景色 */ 10 --menuBottomArrowHeight: 5px; /**** 菜单导航选中时底部箭头的高度 ***/ 11 --menuFontColor: #ffffff; /***** 菜单导航栏字体的颜色 *****/ 12 --menuMainBackGroundColor: #222222; /**** 菜单导航的颜色 ***/ 13 --menuBackGroundColor: transparent; /***** 菜单的背景色 *****/ 14 /*--menuWidth: 200px;*/ /* 菜单的宽度 **/ 15 --menuWidthTotal: 1000px; /* 菜单的总宽度 **/ 16 --menuFontSize: 14px; /* 菜单的字体大小 **/ 17 } 18 body{ 19 padding:0; 20 margin:0; 21 } 22 .humenucontainer { 23 width: 100%; 24 height: var(--menHeight); 25 background-color: var(--menuMainBackGroundColor); 26 text-align: center; 27 } 28 .humenucontainerCon { 29 width: var(--menuWidthTotal); 30 height: var(--menHeight); 31 position: relative; 32 padding: 0; 33 /* margin: 0px auto;*/ 34 } 35 .humenucontainerCon > ul { 36 margin: 0px auto; 37 padding: 0px; 38 border: 0px; 39 font-size: 0px; 40 background-color: var(--menuBackGroundColor); 41 display: block; 42 height: var(--menHeight); 43 text-align: center; 44 } 45 .humenucontainerCon > ul::after { 46 content: ''; 47 display: block; 48 clear: both; 49 } 50 .humenucontainerItem { 51 font-size: var(--menuFontSize); 52 list-style: none; 53 display: inline-block; 54 float: left; 55 /* width: var(--menuWidth);*/ 56 line-height: var(--menHeight); 57 vertical-align: middle; 58 text-align: center; 59 position: relative; 60 padding:0px 15px; 61 box-sizing:border-box; 62 } 63 .humenucontainerItem:hover::after { 64 content: ''; 65 display: block; 66 position: absolute; 67 width: 0px; 68 aspect-ratio: 1 / 1; 69 top: calc( var(--menHeight) - var(--menuBottomArrowHeight) * 2 ); 70 left: 50%; 71 margin-left: calc( var(--menuBottomArrowHeight) * -1 ); 72 border: var(--menuBottomArrowHeight) solid transparent; 73 border-bottom: var(--menuBottomArrowHeight) solid var(--childMenuBackgroundColor); 74 } 75 .humenucontainerItem > a { 76 display: block; 77 text-decoration: none; 78 height: var(--menHeight); 79 color: var(--menuFontColor); 80 } 81 .humenucontainerItem > div { 82 width: calc(var(--childMenuWidth) - 2px); 83 min-width: 1000px; 84 position: fixed; 85 top: var(--menHeight); 86 left: 0%; 87 background-color: var(--childMenuBackgroundColor); 88 height: var(--childMenuHeight); 89 border-radius: 0px 0px 10px 10px; 90 border: 1px solid var(--menuSelectedBackGroundColor); 91 border-top:0px; 92 display: none; 93 } 94 .humenucontainerItem:hover { 95 background-color: var(--menuSelectedBackGroundColor); 96 border-radius:2px; 97 } 98 .humenucontainerItem:hover > div{ 99 display:block; 100 } 101 </style> 102 103 </head> 104 105 <body> 106 <div class="humenucontainer"> 107 <div class="humenucontainerCon"> 108 <ul> 109 <li class="humenucontainerItem"> 110 <a href="#">菜单1</a> 111 <div> 112 <div style="text-align:left;line-height:20px;margin:5px;background-color:transparent;display:inline-block;padding:5px;float:left;"> 113 <div>子菜单1</div> 114 <div style="margin-left:20px;">子菜单11</div> 115 <div style="margin-left: 40px;">子菜单111</div> 116 <div style="margin-left: 40px;">子菜单112</div> 117 <div style="margin-left: 40px;">子菜单113</div> 118 <div style="margin-left: 40px;">子菜单114</div> 119 <div style="margin-left: 40px;">子菜单115</div> 120 <div style="margin-left: 40px;">子菜单116</div> 121 <div style="margin-left: 20px;">子菜单12</div> 122 <div style="margin-left: 20px;">子菜单13</div> 123 </div> 124 <div style="text-align: left; line-height: 20px; margin: 5px; background-color: transparent; display: inline-block; padding: 5px; float: left; "> 125 <div>子菜单2</div> 126 <div style="margin-left:20px;">子菜单21</div> 127 <div style="margin-left: 40px;">子菜单211</div> 128 <div style="margin-left: 40px;">子菜单212</div> 129 <div style="margin-left: 20px;">子菜单22</div> 130 <div style="margin-left: 20px;">子菜单23</div> 131 </div> 132 <div style="text-align: left; line-height: 20px; margin: 5px; background-color: transparent; display: inline-block; padding: 5px; float: left; "> 133 <div>子菜单3</div> 134 </div> 135 <div style="text-align: left; line-height: 20px; margin: 5px; background-color: transparent; display: inline-block; padding: 5px; float: left; "> 136 <div>子菜单4</div> 137 </div> 138 <div style="text-align: left; line-height: 20px; margin: 5px; background-color: transparent; display: inline-block; padding: 5px; float: left; "> 139 <div>子菜单5</div> 140 </div> 141 <div style="text-align: left; line-height: 20px; margin: 5px; background-color: transparent; display: inline-block; padding: 5px; float: left; "> 142 <div>子菜单6</div> 143 </div> 144 <div style="text-align:left;line-height:20px;margin:5px;background-color:transparent;display:inline-block;padding:5px;float:left;"> 145 <div>子菜单7</div> 146 <div style="margin-left:20px;">子菜单71</div> 147 <div style="margin-left: 40px;">子菜单711</div> 148 <div style="margin-left: 40px;">子菜单712</div> 149 <div style="margin-left: 40px;">子菜单713</div> 150 <div style="margin-left: 40px;">子菜单714</div> 151 <div style="margin-left: 40px;">子菜单715</div> 152 <div style="margin-left: 40px;">子菜单716</div> 153 <div style="margin-left: 20px;">子菜单72</div> 154 <div style="margin-left: 20px;">子菜单73</div> 155 </div> 156 </div> 157 </li> 158 <li class="humenucontainerItem"><a href="#">菜单2</a> 159 <div> 160 161 </div> 162 </li> 163 <li class="humenucontainerItem"> 164 <a href="#">菜单3</a> 165 <div> 166 167 </div> 168 </li> 169 <li class="humenucontainerItem"> 170 <a href="#">菜单4</a> 171 <div> 172 173 </div> 174 </li> 175 <li class="humenucontainerItem"> 176 <a href="#">菜单5</a> 177 <div> 178 179 </div> 180 </li> 181 </ul> 182 </div> 183 184 </div> 185 186 </body></html>
效果图：
仅供学习参考使用，可以在此基础上在进行完善。。
浙公网安备 33010602011771号