<ul> <li><a href="#">首页</a></li> <li><a href="#">菜单</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul>请添加此代码的下拉列表样式，并列出HTML和css源代码

HTML代码：

<ul class="dropdown-menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">菜单</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

CSS代码：

.dropdown-menu {
  position: relative;
  display: inline-block;
}

.dropdown-menu li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 12px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu li:hover > ul {
  display: block;
}

.dropdown-menu ul {
  position: absolute;
  display: none;
  top: 30px;
  left: 0;
  z-index: 999;
}

.dropdown-menu ul li {
  float: none;
  margin: 0;
}

.dropdown-menu ul li a {
  padding: 5px 15px;
  color: #333;
  text-decoration: none;
  display: block;
  background-color: #fff;
}

.dropdown-menu ul li a:hover {
  background-color: #f5f5f5;
}

这段代码会给 `ul` 元素添加下拉列表样式，并且当鼠标悬停在菜单项上时，会显示子菜单。