dedecms仿下拉菜单网站

<!-- 示例代码 -->
<ul class="nav">
  <li><a href="#">菜单1</a>
    <ul class="sub-menu">
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a></li>
</ul>

<style>
  .nav > li {
    position: relative;
  }
  .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .nav > li:hover .sub-menu {
    display: block;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 初始化下拉菜单
  });
</script>

// 示例代码
document.addEventListener('DOMContentLoaded', function() {
  var navItems = document.querySelectorAll('.nav > li');
  navItems.forEach(function(item) {
    item.addEventListener('mouseenter', function() {
      this.querySelector('.sub-menu').style.display = 'block';
    });
    item.addEventListener('mouseleave', function() {
      this.querySelector('.sub-menu').style.display = 'none';
    });
  });
});