将HTML/CSS下拉列表添加到导航

我已经开始开发一个网站：www.bossfakeid.co.uk-在navbar上显示products，我需要它来实现这个下拉菜单：-我只需要下拉菜单和插入符号。没有别的，我可以改变颜色。请帮帮我

---

提前谢谢

首先，您需要在想要拥有子菜单的

中创建一个

<li>
      <a href="#" >Products<span style="color:#1D8A4C">▼</span></a>
      <ul class="submenu">
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      <li><a href="">Submenu item</a></li>
      </ul>
</li>

您将需要研究用于菜单构建的CSS：

---

这并不能解释您到目前为止尝试了什么。（或者它表明你还没有尝试过任何东西…）没有人会在这里为你编写代码。@user3786334这是你如何从其他问题中解决问题的，这是所需的代码复制css，并用它替换css。你的问题是你的菜单中有覆盖样式，溢出：隐藏；已应用于标题。

.submenu {
  position: absolute; /*1*/
  border-top: 15px solid transparent; /*2*/
  left: -9999px /*3*/
}

 li:hover > .submenu {
  left: -50px;
}



.submenu:before {
 content: ""; 
 position: absolute;
 z-index: 1; /* bring in front of border */
 margin-top: 5px; /*1*/
 left: -9999px; /*2*/
 top: -15px;
 /* borders for up arrow */
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #34495e;
}

.submenu > li:first-of-type {
  border-radius: 5px 5px 0 0; /*1*/
}

/*
  1. bottom rounded edges on submenu
*/
.submenu > li:last-of-type {
  border-radius: 0 0 5px 5px; /*1*/
}

.submenu a {
  font-size: 90%; /*1*/
  margin: 3px; /*2*/
  border-radius: 5px;
  transition: background ease .3s; /*3*/
}

/* 
  submenu hover styles
*/
.submenu a:hover {
  background: #2AC56C;
}
.submenu li {
  background:#3B3B3B;
}
#menu .active a {
    background: none repeat scroll 0% 0% #2AC56C;
    border-radius: 5px;
}
.submenu:before {
 content: ""; 
 position: absolute;
 z-index: 1; /* bring in front of border */
 margin-top: 5px; /*1*/
 left: 100px; /*2*/
 top: -15px;
 /* borders for up arrow */
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #3B3B3B;
}