HTML Menu 标签

HTML Menu标签用于定义一个菜单列表，通常用于网站的导航栏。

语法

<menu>
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</menu>

在HTML5中，<menu>标签只允许包含<li>标签作为其子元素。每个<li>元素表示一个菜单项，使用<a>标签作为链接。

当然，菜单项可以进行嵌套，例如：

<menu>
  <li><a href="#">菜单项1</a></li>
  <li>
    <a href="#">菜单项2</a>
    <menu>
      <li><a href="#">子菜单项1</a></li>
      <li><a href="#">子菜单项2</a></li>
    </menu>
  </li>
  <li><a href="#">菜单项3</a></li>
</menu>

CSS 样式

由于<menu>标签在大多数浏览器中默认样式都不尽人意，因此我们需要通过CSS调整其样式来美化菜单。

以下是一些常用的样式：

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

menu li {
  position: relative;
}

menu li > menu {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
}

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

menu a {
  display: block;
  padding: 10px;
  color: #444;
  text-decoration: none;
}

menu a:hover {
  background-color: #eee;
}

注意事项

• 不要将<menu>标签用于网页中的任何其他目的。它只应用于定义网站菜单。
• 建议使用语义化标签定义导航，例如<nav>。<menu>标签主要用于快速实现简单的菜单。
• 尽可能使菜单与网站设计相匹配。

以上就是HTML Menu标签的介绍，希望对程序员们有所帮助。