下拉菜单——jQuery+div+ul实现水平下拉菜单

本文链接：https://blog.youkuaiyun.com/qq_44836633/article/details/129160422

该博客介绍了如何利用jQuery、HTML和CSS实现一个水平布局的下拉菜单。首先需要引入jQuery库，然后提供HTML结构，包括主菜单项和下拉内容。接着，通过CSS设置样式，使菜单看起来更专业。最后，应用jQuery代码来实现菜单的交互效果，当鼠标悬停在主菜单项上时，显示下拉内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要引入jQuery：

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

效果：

html代码：

<div class="dropdown clearfix">
    <div class="dropdown-item">导航1</div>
    <div class="dropdown-item">导航2</div>
    <div class="dropdown-item">导航3</div>
    <div class="dropdown-item">导航4</div>
  </div>
  <div class="dropdown-itemlist">
    <div class="dropdown-list">
      <ul>
        <li><a href="#">111</a></li>
        <li><a href="#">111</a></li>
        <li><a href="#">111</a></li>
        <li><a href="#">111</a></li>
      </ul>
      <ul>
        <li><a href="#">222</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">222</a></li>
      </ul>
      <ul>
        <li><a href="#">333</a></li>
        <li><a href="#">333</a></li>
        <li><a href="#">333</a></li>
      </ul>
      <ul>
        <li><a href="#">444</a></li>
        <li><a href="#">444</a></li>
        <li><a href="#">444</a></li>
        <li><a href="#">444</a></li>
      </ul>
    </div>
  </div>

CSS样式：

<style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
    }
    a {
      display: block;
      text-decoration: none;
      color: #eed7d7;
    }
    .clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
    .dropdown-item {
      float: left;
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background-color: #9d4c4c;
      cursor: pointer;
    }
    .dropdown-itemlist {
      text-align: center;
    }
    .dropdown-list ul {
      visibility: hidden;
      float: left;
      width: 100px;
    }
    .dropdown-list ul li {
      height: 35px;
      line-height: 35px;
      background-color: #9d4c4c;
    }
    .dropdown-list ul li:hover {
      background-color: #00E5EE;
    }
  </style>

jQuery代码：

<script>
    $(function() {
      $.each($('.dropdown-item'), function(i) {
        $(this).mouseover(function() {
          $(this).css('background-color', '#00E5EE')
          $('.dropdown-list ul').eq(i).css('visibility', 'visible')
        })
        $(this).mouseout(function() {
          $(this).css('background-color', '')
          $('.dropdown-list ul').eq(i).css('visibility', 'hidden')
        })
      })
      $.each($('.dropdown-list ul'), function(i) {
        $(this).mouseover(function() {
          $('.dropdown-item').eq(i).css('background-color', '#00E5EE')
          $(this).css('visibility', 'visible')
        })
        $(this).mouseout(function() {
          $('.dropdown-item').eq(i).css('background-color', '')
          $(this).css('visibility', 'hidden')
        })
      })
    })
  </script>