artsite/test/styles.css

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

nav {
  background-color: #333;
}

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

.menu-item {
  position: relative;
}

.menu-item > a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  background-color: #333;
  transition: background-color 0.3s;
}

.menu-item > a:hover {
  background-color: #575757;
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  min-width: 200px;
  z-index: 1;
}

.submenu li {
  border-bottom: 1px solid #555;
}

.submenu li:last-child {
  border-bottom: none;
}

.submenu a {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  display: block;
  background-color: #444;
  transition: background-color 0.3s;
}

.submenu a:hover {
  background-color: #555;
}

/* 当鼠标悬停在菜单项上时显示子菜单 */
.menu-item:hover .submenu {
  display: block;
}