怎么把网页制作下拉菜单,自己设计网站的一二级栏目

怎么把网页制作下拉菜单,自己设计网站的一二级栏目,怎么把网页制作下拉菜单,自己设计网站的一二级栏目,

在 HTML 中创建一个菜单列表:

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a>
    <ul>
      <li><a href="#">公司介绍</a></li>
      <li><a href="#">团队成员</a></li>
    </ul>
  </li>
  <li><a href="#">产品</a>
    <ul>
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
    </ul>
  </li>
  <li><a href="#">联系我们</a></li>
</ul>

使用 CSS 设置菜单的样式:

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  float: left;
  position: relative;
}

.menu a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
}

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.menu li:hover > ul {
  display: block;
}

.menu ul ul {
  top: 0;
  left: 100%;
}

使用 JavaScript 来添加响应菜单的事件:

var menuItems = document.querySelectorAll('.menu li');

for (var i = 0; i < menuItems.length; i++) {
  var menuItem = menuItems[i];

  menuItem.addEventListener('mouseover', function() {
    this.classList.add('hover');
  });

  menuItem.addEventListener('mouseout', function() {
    this.classList.remove('hover');
  });
}

如果答案对您有所帮助,望采纳。

C#?你用asp.net的话,系统控件里就有menu控件,支持多级,支持下拉