网页设计与制作（html5+csss3+js）课程中 横向纵向菜单运用方法及效果

在HTML和CSS中创建一个横向纵向菜单，可以使用无序列表 <ul> 和列表项 <li> 来构建菜单，然后通过CSS进行样式设计。以下是一个简单的示例：

HTML:

<div class="menu">
  <ul>
    <li class="menu-item"><a href="#home">Home</a></li>
    <li class="menu-item"><a href="#services">Services</a>
      <ul class="submenu">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#about">About</a></li>
    <li class="menu-item"><a href="#contact">Contact</a></li>
  </ul>
</div>

CSS:

.menu {
  width: 100%;
  background-color: #333;
}
 
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
 
.menu li.menu-item {
  float: left;
}
 
.menu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.menu li a:hover {
  background-color: #111;
}
 
.submenu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
}
 
.menu li:hover .submenu {
  display: block;
}

这个示例中，.menu 是顶级菜单容器，所有的菜单项都放在 <ul> 中。每个菜单项 <li> 都有 .menu-item 类，并使用 float: left; 横向排列。当鼠标悬停在有下拉子菜单的项上时，下拉菜单 .submenu 会显示。这个示例提供了一个简单的横向纵向下拉菜单，可以根据需要进行样式和功能的扩展。