html导航简单特效,简单实用的纯CSS实现的横向多级导航特效代码

好的，这是一个简单实用的纯CSS实现的横向多级导航特效代码：

HTML代码：

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Mobile Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS代码：

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/* 导航样式 */
.menu {
  background: #333;
  height: 60px;
}

.menu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.menu li {
  position: relative;
}

.menu a {
  color: #fff;
  font-size: 18px;
  display: block;
  padding: 0 20px;
  line-height: 60px;
}

/* 子菜单样式 */
.menu ul ul {
  position: absolute;
  top: 60px;
  left: 0;
  background: #333;
  width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.menu ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

.menu ul ul li {
  width: 100%;
  border-bottom: 1px solid #666;
}

.menu ul ul li a {
  padding: 10px 20px;
}

.menu ul ul ul {
  top: 0;
  left: 200px;
  border-left: 1px solid #666;
}

这个代码实现了一个简单的横向多级导航，当鼠标移动到一级菜单上时，会显示对应的二级菜单。你可以根据自己的需求修改样式和内容。