html怎么制作导航菜单 横向导航栏实现方法

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

nav ul {
  list-style: none; /* 移除列表默认样式 */
  margin: 0;
  padding: 0;
  overflow: hidden; /* 清除浮动 */
  background-color: #333; /* 设置背景颜色 */
}

nav li {
  float: left; /* 使列表项左浮动，实现横向排列 */
}

nav li a {
  display: block; /* 将链接转换为块级元素，使其填充整个列表项 */
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; /* 移除下划线 */
}

nav li a:hover {
  background-color: #111; /* 鼠标悬停时的背景颜色 */
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; /* 确保导航栏在其他内容之上 */
}

<nav>
  <div class="menu-toggle">☰</div>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

nav ul {
  /* 默认隐藏导航栏 */
  display: none;
  /* 其他样式 */
}

.menu-toggle {
  /* 汉堡菜单按钮的样式 */
  display: block; /* 默认显示 */
  cursor: pointer;
}

/* 当屏幕尺寸小于某个值时 */
@media screen and (max-width: 600px) {
  nav ul {
    display: none; /* 默认隐藏 */
    flex-direction: column; /* 垂直排列 */
  }

  .menu-toggle {
    display: block; /* 显示汉堡菜单按钮 */
  }

  nav ul.active {
    display: flex; /* 点击后显示导航栏 */
  }
}

const menuToggle = document.querySelector('.menu-toggle');
const navUl = document.querySelector('nav ul');

menuToggle.addEventListener('click', () => {
  navUl.classList.toggle('active');
});

nav ul {
  display: flex; /* 使用Flexbox布局 */
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

nav li {
  flex: 1; /* 让列表项平分空间 */
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

nav ul {
  display: grid; /* 使用CSS Grid布局 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动调整列数 */
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
  background-color: #111;
}

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品中心</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

nav ul li ul {
  display: none; /* 默认隐藏下拉菜单 */
  position: absolute; /* 绝对定位，使其脱离文档流 */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

nav ul li:hover ul {
  display: block; /* 鼠标悬停时显示下拉菜单 */
}

nav ul li ul li a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

nav ul li ul li a:hover {
  background-color: #ddd;
}