CSS浮动导航栏下拉菜单实现方法

.navbar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden; /* 清除浮动影响 */
}
.navbar li {
float: left; / 水平排列菜单项 /
}
.navbar a {
display: block;
color: white;
text-decoration: none;
padding: 14px 20px;
}
.navbar a:hover {
background-color: #555;
}

.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  background-color: #444;
  min-width: 160px;
  display: none; /* 默认隐藏 */
}
.dropdown-menu li {
float: none; / 子菜单垂直排列 /
}
.dropdown-menu a {
padding: 12px 16px;
}
.dropdown:hover .dropdown-menu {
display: block; / 悬停时显示下拉菜单 /
}

.dropdown {
  position: relative; /* 为子菜单提供定位上下文 */
}
.dropdown-menu {
top: 100%;
left: 0;
z-index: 100;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
}