CSS+JavaScript下拉菜单布局与代码执行

article/2025/9/8 1:46:49

导读：今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果

头部的布局以及下拉菜单布局

实现代码：

<html>
<body><div class="box"><ul class="body"><li><a href="#">首页</a><ul></ul></li><li><a href="#">新房</a><ul class="pull-down"><li> <a href="#">新盘</a></li><li> <a href="#">楼讯</a></li><li> <a href="#">热门活动</a></li></ul></li><li><a href="#">二手房</a><ul class="pull-down"><li><a href="#">地图找房</a></li><li><a href="#">房源</a></li><li> <a href="#">小区</a></li></ul></li><li><a href="#">租房</a><ul class="pull-down"><li> <a href="#">区域找房</a></li><li><a href="#">地图找房</a></li><li><a href="#">地铁找房</a></li></ul></li><li><a href="#">商铺写字楼</a><ul class="pull-down"><li> <a href="#">商铺出租</a></li><li><a href="#">商铺出售</a></li><li> <a href="#">商铺新盘</a></li></ul></li><li><a href="#">海外地产</a><ul></ul></li><li><a href="#">装修</a><ul></ul></li><li><a href="#">楼讯</a><ul></ul></li><li><a href="#">房产研究院</a><ul></ul></li><li><a href="#">房价</a><ul></ul></li></ul></div>
</body>
</html>

css布局部分：

<style>* {margin: 0;padding: 0;}.box {width: 100%;height: 48px;background-color: #62AB00;position: relative;float: left;line-height: 48px;}li {list-style: none;}.body>li {float: left;list-style: none;position: relative;}.body {width: 1180px;margin: 0 auto;height: 100%;}ul>li>a {text-decoration: none;padding: 0 15px;font-size: 18px;color: black;}li>.pull-down>a {text-decoration: none;}li>.pull-down a:hover {color: green;}.pull-down {border: 1px solid #ccc;background-color: #F9F9F9;position: absolute;left: 0;width: 150px;z-index: 344;display: none;}.hover {background-color: #528E01;}</style>

css这一块主要核心是通过盒子浮动，定位来布局，还有对选择器的熟练掌握。

js代码块实现鼠标移入目标事件，显示下拉菜单，失去鼠标焦点隐藏下拉菜单

主要重点在于逻辑的判断，通过for循环来遍历鼠标移入目标的具体项，主要防止效果重复不消失

然后就是DOM中对于父子节点的掌握，通过父节点找到子节点，实现下拉菜单的显示隐藏

<script>var move = document.querySelectorAll('.body>li');// console.log(move[0])for (i = 0; i < move.length; i++) {move[i].onmouseover = function () {this.children[1].style.display = 'block'this.className = 'hover'// console.log("dianjil")}move[i].onmouseout = function () {this.className = ''this.children[1].style.display = 'none'}}</script>

这里需要注意得是这样通过父子节点找事件，会出现一个BUG，就是在鼠标移入没有第二个子节点的项时会报错，但是不影响运行。为什么出现，因为我们的需求是要寻找子集菜单，而子集菜单是children【1】项，就是下标为1的那个，但是所有的项并不都是有下拉菜单，这样就会导致在运行中找不到下标为【1】的children，就会报错。

此时正常

此时报错