Html 现有导航菜单的外接程序下拉功能

我有一个现有的HTML菜单，我需要添加进一步的导航。我已经添加了额外的

和

标签，我认为它们位于正确的位置。我遇到的问题是让更多的选项下降到“索赔类型”选项下面

以下是HTML代码：

<div id="nav">
  <ul>
      <li><a href="index.php">HOME</a></li>
      <li><a href="injury-claim-calculator.php">INJURY CLAIM CALCULATOR</a></li>
      <li><a href="personal-injury-solicitors.php">WHO WE ARE</a></li>
      <li><a href="what-we-do.php">WHAT WE DO</a></li>
      <li><a href="#">TYPES OF CLAIMS</a>
      <ul>
          <li><a href="#">CLAIM 1</a></li>
          <li><a href="#">CLAIM 2</a></li>
          <li><a href="#">CLAIM 3</a></li>
      </ul>
      </li>
      <li><a href="contact.php">CONTACT US</a></li>
    </ul>
</div>

---

任何帮助都将不胜感激

你需要这样的东西：

#nav ul li ul {opacity:0;}
#nav ul li:hover ul {opacity;1;}

-或-

-或-

基本上，您需要告诉嵌套的ul（无序列表），它有一个用于父li的样式使其不可见，另一个用于父li的样式：hover使其以某种方式可见。实现这一点有多种方法

您可以使用

#nav ul li ul{可见性：隐藏；}

和

#nav ul li:hover ul{visibility:visibility；}

试试这个（多个级别）。看看

#nav ul li ul {opacity:0;}
#nav ul li:hover ul {opacity;1;}

#nav ul li {display:relative;}
#nav ul li ul {display:absolute; top:-2000px;}
#nav ul li:hover ul {top:0;}

#nav ul li ul {width:150px; position:absolute; visibility:hidden; top:-2000px;}
#nav ul li:hover ul {visibility:visible;}