二級目錄:解決了二級目錄的寬度可控制，但是又產生一個分離的問題，唉，，，，，，，，，，，，，，，
阿新 • • 發佈：2019-01-06
html,js:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>1</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <link rel="stylesheet" type="text/css" href="css/1.css" /> </head> <body> <div id="header" class="header"> <span class="key"><!-- 注意html設計也十分重要，有些標籤是自帶最小padding，margin，height，width --> <p>中國大陸</p> </span> <span>親，請登入</span><!-- 所以導航欄最好使用inline元素 --> <span>免費註冊</span> <span>手機淘寶</span> <ul> <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> <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> <li><a href="#">加拿大</a></li> <li><a href="#">美國</a></li> <li><a href="#">日本</a></li> </ul> </div> <script> $(function(){ $("p").mouseover(function(){ $("ul").css('display','block'); $(".key").css('background-color','white'); }); $("ul").mouseover(function(){ $("ul").css('display','block'); $(".key").css('background-color','white'); }); $("ul").mouseout(function(){ $("ul").css('display','none'); $(".key").css('background-color','lavender'); }); }); </script> </body> </html>
css:
html, body { height: 100%; width: 100%; } * { margin: 0px; border: 0px; } .header { width: 100%; height: 4%; background: lavender; } .header span{ float: left; margin-left: 1em; height: 100%; font-family: "仿宋"; cursor: pointer; } p{padding:0 15px 0 5px;} p::after{ display: block; height: 5px; width: 5px; margin: -25% 105%; content: ""; transform: rotateZ(45deg); border: 2px solid darkgray; border-top: none; border-left: none; } .header span:nth-child(1):hover{background-color: white;} .header span:nth-child(2){color: orange;} .header span:nth-child(3):hover{color: orange;} .header span:nth-child(4):hover{color: orange;} ul{ position: relative; height: 250px; width: 300px; left: -25%; top: 25px; padding: 10px 0; z-index: 1000; list-style: none; text-align: left; font-family: "仿宋"; overflow-y: scroll; display: none; } li{margin-top: 10px;} li:hover{background-color: lavender;} a{text-decoration: none;color: black;}
截圖：
