Question

我有一个现有的HTML菜单，我需要添加进一步的导航。我添加了额外的<ul>和<li>标记，我认为这些标记位于正确的位置。我遇到的问题是获得进一步的选项，以下面的＆＃34;索赔类型＆＃34;选项。

以下是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;}

-OR -

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

-OR -

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

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

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

Answer 2

你可以使用 #nav ul li ul {visibility:hidden;}和 #nav ul li: hover ul {visibility:visible;}

添加现有导航菜单的下拉功能

2 个答案: