Question

我正在重新设计this website，除了一些仍需要添加的内容之外，我想我已经解决了所有问题。不幸的是，当我在Safari中检查页面时，我发现下拉导航菜单无法正确呈现。它在我检查过的所有其他浏览器中都能正常工作，但在Safari中，当我将鼠标悬停在“练习区”上以获得下拉列表时，所有子类别都带有下划线。

（很遗憾，我没有足够的声誉来发布图片，所以你必须在不同的浏览器中打开网站才能看到我在说什么）

在所有其他浏览器上，只有您实际悬停的项目带有下划线。

我的CSS代码是：

/**NAV MENU**/
#sub_nav {
  margin: 35px 0px 0px 550px;
  font-size: 16px;
}

#sub_nav ul {
  list-style: none;
}

#sub_nav li:hover {
  text-decoration:underline;
}

#nav > li {
  float: left;
}

#nav li {
  display: block;
  height: 2em;
  line-height: 2em;
  padding: 0 1.5em;
  text-decoration: none;
  background-color: #fff;
}

#nav li a {
  text-decoration: none;
}

#nav ul {
  position: absolute;
  display: none;
  z-index: 999;
}

#nav li:hover ul {
  display: block;
}

#nav li ul li{
  width: 145px;
}

和html代码是

<div id="sub_nav">
  <ul id="nav">
    <li><a href="../index.html">Home</a></li>
    <li><a href="../profile.html">Profile</a></li>
    <li>
      Practice Areas
      <ul>
        <li><a href="juvenile_law.html">Juvenile Law</a></li>
        <li><a href="white_collar_crime.html">White Collar Crimes</a></li>
        <li><a href="drunk_driving.html">Drunk Driving</a></li>
        <li><a href="sex_crimes.html">Sex Crimes</a></li>
        <li><a href="domestic_violence.html">Domestic Violence</a></li>
        <li><a href="drug_offenses.html">Drug Offenses</a></li>
      </ul>
    </li>
    <li><a href="../results.html">Case Results</a></li>
    <li><a href="../contact.html">Contact Us</a></li>
  </ul>
</div>

另外，我从this网站获得了代码的基础。

如果重要，我有Safari 5.1.7

Answer 1

变化：

#sub_nav li:hover {
    text-decoration:underline;
}

宽度：

#sub_nav li a:hover {
    text-decoration:underline;
}

a：悬停在Safari中无法正确呈现

1 个答案: