Question

所以我试图让菜单栏中的所有项目都加粗。我有几个链接，一切正常，但一个没有。在我的CSS中有一个：悬停选择器，当鼠标悬停在每个项目上时，可以更改按钮背景的颜色。有一个是不同的，因为它是一个下拉菜单，当您将鼠标悬停在它上面时弹出。显然，它有一个：悬停选择器，当鼠标悬停在菜单上时显示菜单，同时改变背景颜色。当我在计算机上的浏览器中查看代码时，它很好。与在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不支持：悬停选择器或其他东西（因为只有下拉列表没有显示粗体）。如果有人能解释为什么它不起作用以及如何解决它我会非常感激它！

Answer 1

您可以使用＆lt; .select＆gt;和＆lt; .option＆gt;下拉列表的标签。然而，如果设备被越狱，人们也报告了这个错误。你试过＆lt; .b＆gt;标签而不是font-weight？如果它在其他设备上工作，则意味着它可能＆＃34;可能＆＃34; iPhone的问题。（在标签内应忽略fullstops）

Answer 2

移动设备没有：悬停状态，因为没有持久性指针。换句话说，由于没有鼠标光标来激活：悬停状态，移动设备通常会激活：1次点击时悬停样式和第2次点击时的实际链接。有些Android设备会忽略：悬停状态并点击链接。

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

编辑：我将您的代码放入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>

大胆的文字没有在iPhone上显示，但在Android上显示正常

2 个答案: