html - 为现有导航菜单添加下拉功能

Question

我有一个现有的 HTML 菜单，我需要向其添加更多导航。我添加了额外的 <ul>和 <li>我认为在正确位置的标签。我遇到的问题是让更多选项下拉到“ claim 类型”选项下方。

这是 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>

这是CSS代码:

#nav ul li {
display: inline;
width: 100px;
}
#nav ul li a:link {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}

#nav ul li a:visited {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}

#nav ul li a:hover {
color: #FFF;
float: left;
padding-right: 45px;
text-decoration: underline;
}
#nav ul {
margin: 0px;
padding: 0px;
}

任何帮助将不胜感激!

Answer 1

你需要这样的东西:

#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;}

基本上，您需要告诉嵌套的 ul(无序列表)它有一种父 li 样式使其不可见，另一种父 li:hover 样式使其以某种方式可见。有多种方法可以实现这一目标。

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/