html - 粗体文本在 iPhone 上不显示，但在 Android 上显示正常

Question

所以我试图让菜单栏中的所有元素都加粗。我有几个链接都可以正常工作，但有一个链接不行。在我的 CSS 中，有一个 :hover 选择器可以在鼠标悬停在每个元素上时更改按钮背景的颜色。有一个是不同的，因为它是一个下拉菜单，当您将鼠标悬停在它上面时会弹出。显然，它有一个 :hover 选择器，可以在鼠标悬停在菜单上时显示菜单，同时更改背景颜色。当我在计算机上的浏览器中查看代码时，结果很好。与在 Android 设备上查看相同。但是，无论出于何种原因，当我在 iPhone 上将其拉起时，下拉项都没有加粗。我什至在 iPhone 上尝试了多种浏览器都无济于事。

这是我的 HTML:

<div id="menu">
  <ul>
    <li id="dropdown"><a href="#">Dropdown</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul></li>
    <li><a href="#">Normal</a></li>
    <li><a href="#">Normal</a></li>
  </ul>
</div>

这是我的 CSS:

#menu {
  margin: 0px;
  padding: 10px 0px 10px 0px;
  background-color: #A4C3FF;
  width: 100%;
  text-align: center; 
}

#menu ul {
  list-style: none;
  margin: auto;
  padding: 0;
}

#menu ul li {
  display: inline;
  padding: 5px 30px 5px 30px;
  font-size: 28px;
  color: white;
  font-weight: bold;
}

#menu ul li:hover {
  background:#325CBE;
}

#menu a:link, #menu a:visited {
  color:white;
  text-decoration:none;
  font-weight: bold;
}

#dropdown a {
  line-height: 40px;
}

#dropdown {
  position:relative;
}

#dropdown ul {
  display:none;
  position:absolute;
  top: 90%;
  left: 0px;
  background:#A4C3FF;
  padding: 10px 0;
}

#dropdown:hover > ul {
  display:block;
}

因为它在除 iPhone 以外的所有设备上都能正常工作，我猜想这是 iPhone 不支持 :hover 选择器或其他东西的问题(因为只有下拉菜单不显示为粗体)。如果有人能向我解释为什么它不起作用以及如何解决它，我将非常感激!

Answer 1

移动设备没有 :hover 状态，因为没有持久指针。换句话说，由于没有鼠标光标来激活 :hover 状态，因此移动设备通常会在第一次点击时激活 :hover 样式，在第二次点击时激活实际链接。一些 Android 设备会简单地忽略 :hover 状态并点击链接。

如果您澄清您的问题，我们可能会给出更好的答案。

编辑:我已将您的代码放入 JSFiddle 中。
它似乎在 iPhone 上运行良好 - http://jsfiddle.net/6vn91t8d/

<div id="menu">
<ul>
<li id="dropdown"><a href="#">Dropdown</a>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
  </ul></li>
<li><a href="#">Normal</a></li>
<li><a href="#">Normal</a></li>