課程
/前端開發(fā)
/JavaScript
/形形色色的下拉菜單
又學會一個
2017-11-07
源自：形形色色的下拉菜單 5-2
正在回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>??? <title></title>??? <style type="text/css">??????? .top-nav??????? {??????????? font-size: 12px;??????????? font-weight: bold;??????????? list-style: none;??????? }??????? .top-nav li??????? {??????????? float: left;??????????? list-style: none;??????????? margin-right: 1px;??????? }??????? .top-nav li a??????? {??????????? line-height: 20px;??????????? text-decoration: none;??????????? background: #DDDDDD;??????????? color: #666666;??????????? display: block;??????????? width: 80px;??????????? text-align: center;??????? }??????? .top-nav li a:hover??????? {??????????? background: #900;??????????? color: #FFF;??????? }??????? .top-nav ul??????? {??????????? list-style: none;??????????? display: none;??????????? width: 80px;??????????? padding: 0;??????????? position: relative;??????? }??????? .top-nav li ul li ul??????? {??????????? position: absolute;??????????? top: 0;??????????? left: 80px;??????? }??????? ??? /* 使用CSS設置鼠標移動到一級菜單時，二級菜單顯示，三級菜單隱藏 */???????
???????? .top-nav li:hover ul??????? {??????????? display:block;??????? }??????? .top-nav li:hover ul li ul??????? {??????????? display:none;??????? }???????? ??? /* 使用CSS設置鼠標移動到二級菜單時，三級菜單顯示 */?? ??????? .top-nav li ul li:hover ul??????? {?????????? display:block;??????? }??? </style>??? <script type="text/javascript">??????? window.onload = function () {??????? //判斷是否為IE瀏覽器??????????? var isIE = !!window.ActiveXObject;??????????? var isIE6 = isIE && !window.XMLHttpRequest;??????????? if (isIE6) {??????????? var Lis = document.getElementsByTagName("li");??????????? for (var i = 0; i < Lis.length; i++) {??????????????? Lis[i].onmouseover = function () {??????????????????? var u = this.getElementsByTagName("ul")[0];??//如果包含子菜單，就將子菜單顯示??????????????? if(u!=undefined){??????????????????? u.style.display="block";??????????????????? ??????????????????? }??????????????? }
??????????????? Lis[i].onmouseout = function () {??????????????????? var u = this.getElementsByTagName("ul")[0];??//如果包含子菜單，就將子菜單隱藏??????????????? if(u!=undefined){??????????????????? u.style.display="none";??????????????????? }??????????????? }??????????? }
??????????? }??????? }??? </script></head><body>??? <ul class="top-nav">??????? <li><a href="#">慕課網首頁</a>??????????? <ul>??????????????? <li><a href="#">前端課程 +</a>??????????????????? <ul>??????????????????????? <li><a href="#">javascript</a></li>??????????????????????? <li><a href="#">css</a></li>??????????????????????? <li><a href="#">jquery</a></li>??????????????????? </ul>??????????????? </li>??????????????? <li><a href="#">手機開發(fā)</a>??????????????????? <ul>??????????????????????? <li><a href="#">ios開發(fā)</a></li>??????????????????????? <li><a href="#">android開發(fā)</a></li>??????????????????????? <li><a href="#">WP開發(fā)</a></li>??????????????????? </ul>??????????????? </li>??????????????? <li><a href="#">后臺編程</a></li>??????????? </ul>??????? </li>??????? <li><a href="#">課程大廳</a> </li>??????? <li><a href="#">學習中心 +</a>??????????? <ul>??????????????? <li><a href="#">前端課程 +</a>??????????????????? <ul>??????????????????????? <li><a href="#">javascript</a></li>??????????????????????? <li><a href="#">css</a></li>??????????????????????? <li><a href="#">jquery</a></li>??????????????????? </ul>??????????????? </li>??????????????? <li><a href="#">手機開發(fā)</a>??????????????????? <ul>??????????????????????? <li><a href="#">ios開發(fā)</a></li>??????????????????????? <li><a href="#">android開發(fā)</a></li>??????????????????????? <li><a href="#">WP開發(fā)</a></li>??????????????????? </ul>??????????????? </li>??????????????? <li><a href="#">后臺編程</a></li>??????????? </ul>??????? </li>??????? <li><a href="#">關于我們</a></li>??? </ul></body></html>
舉報
本教程從易到難，循循漸進，運用不同技術實現(xiàn)動態(tài)下拉菜單
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-11-15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title></title>
??? <style type="text/css">
??????? .top-nav
??????? {
??????????? font-size: 12px;
??????????? font-weight: bold;
??????????? list-style: none;
??????? }
??????? .top-nav li
??????? {
??????????? float: left;
??????????? list-style: none;
??????????? margin-right: 1px;
??????? }
??????? .top-nav li a
??????? {
??????????? line-height: 20px;
??????????? text-decoration: none;
??????????? background: #DDDDDD;
??????????? color: #666666;
??????????? display: block;
??????????? width: 80px;
??????????? text-align: center;
??????? }
??????? .top-nav li a:hover
??????? {
??????????? background: #900;
??????????? color: #FFF;
??????? }
??????? .top-nav ul
??????? {
??????????? list-style: none;
??????????? display: none;
??????????? width: 80px;
??????????? padding: 0;
??????????? position: relative;
??????? }
??????? .top-nav li ul li ul
??????? {
??????????? position: absolute;
??????????? top: 0;
??????????? left: 80px;
??????? }
???????
??? /* 使用CSS設置鼠標移動到一級菜單時，二級菜單顯示，三級菜單隱藏 */
???????
???????? .top-nav li:hover ul
??????? {
??????????? display:block;
??????? }
??????? .top-nav li:hover ul li ul
??????? {
??????????? display:none;
??????? }
????????
??? /* 使用CSS設置鼠標移動到二級菜單時，三級菜單顯示 */??
??????? .top-nav li ul li:hover ul
??????? {
?????????? display:block;
??????? }
??? </style>
??? <script type="text/javascript">
??????? window.onload = function () {
??????? //判斷是否為IE瀏覽器
??????????? var isIE = !!window.ActiveXObject;
??????????? var isIE6 = isIE && !window.XMLHttpRequest;
??????????? if (isIE6) {
??????????? var Lis = document.getElementsByTagName("li");
??????????? for (var i = 0; i < Lis.length; i++) {
??????????????? Lis[i].onmouseover = function () {
??????????????????? var u = this.getElementsByTagName("ul")[0];
??//如果包含子菜單，就將子菜單顯示
??????????????? if(u!=undefined){
??????????????????? u.style.display="block";
???????????????????
??????????????????? }
??????????????? }
??????????????? Lis[i].onmouseout = function () {
??????????????????? var u = this.getElementsByTagName("ul")[0];
??//如果包含子菜單，就將子菜單隱藏
??????????????? if(u!=undefined){
??????????????????? u.style.display="none";
??????????????????? }
??????????????? }
??????????? }
??????????? }
??????? }
??? </script>
</head>
<body>
??? <ul class="top-nav">
??????? <li><a href="#">慕課網首頁</a>
??????????? <ul>
??????????????? <li><a href="#">前端課程 +</a>
??????????????????? <ul>
??????????????????????? <li><a href="#">javascript</a></li>
??????????????????????? <li><a href="#">css</a></li>
??????????????????????? <li><a href="#">jquery</a></li>
??????????????????? </ul>
??????????????? </li>
??????????????? <li><a href="#">手機開發(fā)</a>
??????????????????? <ul>
??????????????????????? <li><a href="#">ios開發(fā)</a></li>
??????????????????????? <li><a href="#">android開發(fā)</a></li>
??????????????????????? <li><a href="#">WP開發(fā)</a></li>
??????????????????? </ul>
??????????????? </li>
??????????????? <li><a href="#">后臺編程</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">課程大廳</a> </li>
??????? <li><a href="#">學習中心 +</a>
??????????? <ul>
??????????????? <li><a href="#">前端課程 +</a>
??????????????????? <ul>
??????????????????????? <li><a href="#">javascript</a></li>
??????????????????????? <li><a href="#">css</a></li>
??????????????????????? <li><a href="#">jquery</a></li>
??????????????????? </ul>
??????????????? </li>
??????????????? <li><a href="#">手機開發(fā)</a>
??????????????????? <ul>
??????????????????????? <li><a href="#">ios開發(fā)</a></li>
??????????????????????? <li><a href="#">android開發(fā)</a></li>
??????????????????????? <li><a href="#">WP開發(fā)</a></li>
??????????????????? </ul>
??????????????? </li>
??????????????? <li><a href="#">后臺編程</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">關于我們</a></li>
??? </ul>
</body>
</html>