html可展开的导航菜单代码

HTML 可展开的导航菜单是一种常见的网页设计元素，它可以使用户更方便的查看和访问网站的各个部分。在本文中，我们将介绍一个基本的 HTML 可展开的导航菜单代码，并解释如何使用该代码在网站中添加可展开的导航菜单。首先，让我们来看一下 HTML 可展开的导航菜单的基本结构，代码如下所示：

<ul class="nav">
  <li>
    <a href="#">Link 1</a>
    <ul class="sub-nav">
      <li><a href="#">Sub Link 1</a></li>
      <li><a href="#">Sub Link 2</a></li>
      <li><a href="#">Sub Link 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

该代码使用

html可展开的导航菜单代码

<ul> 和 <li> 标签来创建一个基本的导航菜单。每个菜单项都是一个 <li> 元素，其中包含一个 <a> 元素，用于将用户链接到页面的其他部分。要使菜单可展开，我们需要在每个包含子菜单的菜单项中添加一个 <ul> 元素。子菜单中的每个子菜单项都是一个 <li> 元素。为了控制菜单的样式和行为，我们还需要添加 CSS 样式。以下是一个基本的 CSS 样式代码：

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

.nav li {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

.nav a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

.sub-nav {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  Box-shadow: 0 2px 5px rgba(0,0.2);
  z-index: 1;
  display: none;
}

.sub-nav li {
  display: block;
}

.sub-nav a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

.nav li:hover .sub-nav {
  display: block;
}

该样式将菜单项设置为列表项、移除了默认的列表样式、使每项菜单右边有10像素的空出。子菜单设置为绝对定位，上边框相对于父菜单底部，列表项垂直展示或隐藏实现。当鼠标悬停在菜单项上时，将显示对应的子菜单。现在，我们已经有了一个基本的 HTML 可展开的导航菜单代码和相应的样式。您可以使用这些代码作为基础，根据自己的需求和喜好调整和修改样式和布局，以满足您网站的要求。

html可展开的导航菜单代码

相关推荐