Dieser Artikel stellt hauptsächlich die Methode zur Implementierung des dreistufigen CSS-Dropdown-Menüs vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen
<!DOCTYPE html> <html> <head> <title>test</title> <style type = "text/css"> /*设置通配符样式*/ *{ margin:0; padding:0; } body{ font-size:12px; } ul{ list-style:none; } a{ text-decoration:none; }</p> <p>/*设置二级导航样式*/ .nav { width:500px; height:30px; background-color:#b4b4b4; /*导航栏居中*/ margin:auto; } .nav ul li { width:100px; height:30px; float:left; position:relative; } .nav ul li a { display:block; width:96px; border:2px solid gray; height:26px; line-height:26px; text-align:center; } .nav ul li a:hover { background-color:yellow; }</p> <p>/*设置一级导航样式*/ .nav ul li ul{ display:none; } .nav ul li:hover ul{ display:block; width:100px; position:absolute; top:30px; left:0; background-color:white; } .nav ul li:hover ul li a{ display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul li a:hover{ background-color:orange; }</p> <p>/*设置三级导航样式*/ .nav ul li:hover ul li ul { display:none; } .nav ul li:hover ul li:hover ul{ display:block; width:100px; position:absolute; top:0px; left:100px; background-color:#b4b4b4; } .nav ul li:hover ul li:hover ul li { width:100px; height:30px; } .nav ul li:hover ul li:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul li:hover ul li a:hover { background-color:#00CC00; } .nav ul li:hover ul .nav_jw ul { display:none; } .nav ul li:hover ul .nav_jw:hover ul{ display:block; width:100px; position:absolute; top:0px; left:-100px; background-color:#b4b4b4; } .nav ul li:hover ul .nav_jw:hover ul li { width:100px; height:30px; } .nav ul li:hover ul .nav_jw:hover ul li a { display:block; width:96px; height:26px; line-height:26px; border:2px solid gray; text-align:center; } .nav ul li:hover ul .nav_jw:hover ul li a:hover { background-color:#00CC00; }</p> <p></style> </head> <body> <p class = "nav"> <ul> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> <li><a href = "#">二级导航</a></li> </ul> </li> <li><a href = "#">一级导航</a> <ul> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> <li class="nav_jw"><a href = "#">二级导航</a> <ul> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> <li><a href = "#">三级导航</a></li> </ul> </li> </ul> </li> </ul> </p> </body> </html>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So lösen Sie das Problem, dass CSS-Filter gleichzeitig Text filtern
css+div Mehrschritt-Fortschrittsbalken Der Implementierungscode von
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein dreistufiges CSS-Dropdown-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!