HTML代碼

<div class="nav"><ul><li><a href="#">首頁</a></li><li class="xinfang"><a href="#">新房</a><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></ul></li><li class="ershoufang"><a href="#">二手房</a><ul><li><a href="#">房源</a></li><li class="dixian"><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></li><li class="zufang"><a href="#">租房</a><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></ul></li><li class="width shangpu"><a href="#">商鋪寫字樓</a><div><ul><li><b>商鋪</b></li><li><a href="#">商鋪出租</a></li><li><a href="#">商品新盤</a></li><li><a href="#">商品出售</a></li></ul><ul><li><b>寫字樓</b></li><li><a href="#">寫字樓出售</a></li><li><a href="#">寫字樓新盤</a></li><li><a href="#">寫字樓出租</a></li><li><a href="#">辦公樓盤</a></li></ul><ul><li><b>廠房</b></li><li><a href="#">廠房出租</a></li><li><a href="#">廠房出售</a></li><li><a href="#">廠房轉讓</a></li></ul><ul><li><b>倉庫</b></li><li><a href="#">倉庫出租</a></li><li><a href="#">倉庫轉讓</a></li><li><a href="#">倉庫出售</a></li></ul><ul><li><b>土地</b></li><li><a href="#">土地出售</a></li><li><a href="#">土地轉讓</a></li><li><a href="#">土地財政</a></li></ul><ul><li><b>車位</b></li><li><a href="#">車位出售</a></li><li><a href="#">車位出租</a></li><li><a href="#">車位轉讓</a></li></ul></div></li><li class="width"><a href="#">海外地產</a></li><li><a href="#">裝修</a></li><li><a href="#">樓訊</a></li><li class="width"><a href="#">房產研究院</a></li><li><a href="#">房價</a></li><li><a href="#">問答</a></li><li class="width"><a href="#"><span class="iconfont"></span>登錄 注冊</a></li></ul></div>

CSS代碼

<style>*{margin: 0px;padding: 0px;}a{text-decoration: none;}li{list-style: none;}.nav{width: 100%;}.nav>ul{width: 1320px;height: 40px;border: 1px solid gray;margin: 20px auto;display: flex;justify-content: space-between;}.nav>ul>li{width: 60px;height: 40px;}.nav>ul>li>a{display: block;width: 60px;height: 40px;font-size: 12px;text-align: center;line-height: 40px;}.nav>ul>.width{width: 140px;height: 40px;}.nav>ul>.width>a{display: block;width: 120px;height: 40px;font-size: 12px;/* text-align: center; */line-height: 40px;}.nav>ul>li>a:hover{background: pink;color: grey;}.nav>ul>.xinfang>ul{width: 100px;border: 1px solid gray;display: none;}.nav>ul>.xinfang>ul>li>a{display: block;color: grey;width: 100px;height: 30px;line-height: 30px; margin-top: 5px;text-indent: 1em;}.nav>ul>.xinfang>ul>li>a:hover{color: white;background: grey;}.nav>ul>.ershoufang>ul{width: 140px;border: 1px solid gray;display: none;}.nav>ul>.ershoufang>ul>li>a{display: block;width: 140px;height: 30px;line-height: 30px;text-indent: 1em;margin-top: 10px;color: grey;}.nav>ul>.ershoufang>ul>li>a:hover{color: white;background: green;}.nav>ul>.zufang>ul{width: 120px;border: 1px solid gray;display: none;}.nav>ul>.zufang>ul>li>a{display: block;width: 120px;height: 30px;text-indent: 1em;line-height: 30px;color: grey;margin-top: 5px;}.nav>ul>.zufang>ul>li>a:hover{color: white;background: green;}.nav>ul>.shangpu>div{width: 600px;border: 1px solid gray;/* display: flex; */justify-content: space-between;padding: 10px;display: none;}.nav>ul>.shangpu>div::after{display: table;content:'';clear: both;}.nav>ul>.shangpu>div>ul{float: left;}.nav>ul>.shangpu>div>ul>li>a{display: block;width: 100px;height: 30px;color: grey;line-height: 30px;}.nav>ul>.shangpu>div>ul>li>a:hover{color: white;background: green;text-indent: 1em;}</style>

JS代碼

<script>//獲取元素let lis=document.querySelectorAll('.nav>ul>li');let div=document.querySelector('.nav>ul>.shangpu>div');//循環元素綁定鼠標事件for(i=0;i<lis.length;i++){// console.log(lis[i].childNodes[2]); //換行和空格都算文本節點//鼠標移入事件lis[i].onmouseover=function(){//讓循環的這個li時它的第二個子元素顯示 這里寫children[1]是更居索引獲得索引號為1的子元素this.children[1].style.display='block' }//鼠標移出事件lis[i].onmouseout=function(){this.children[1].style.display='none'}}</script>

效果圖

總結

以上是生活随笔為你收集整理的安居客导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。