Question

我似乎无法让我的菜单项可点击......它们可以在IE中使用，但不适用于Firefox或Chrome。我还可以让他们在我的iPad上使用Chrome和Safari工作，但是当我以横向模式持有iPad时却不行。非常奇怪。

HTML：

<div id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">All</a></li>
<li><a href="#filter" data-option-value=".tech">Tech</a></li>
<li><a href="#filter" data-option-value=".social">Social</a></li>
<li><a href="#filter" data-option-value=".health">Health</a></li>  
</ul>
</div>

CSS：

#options ul {
  list-style: none outside none;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 10px;
}
#options li {
  display: inline;
}
#options li a {
    color:#666666;
    font-size: 15px;
    padding: 10px 10px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 34px;
}
#options li a:hover {
    color:#3B5998;
}
#options li a:active {
    color:#3B5998;
}
#options li a.selected {
    color:#3B5998;
}

任何帮助都会很棒，我不是最好的HTML和CSS所以我很欣赏任何见解。

我的网站是www.pinstart.us

干杯。

Answer 1

似乎对我工作正常，但您可以尝试显示'a'标签：inline-block

#options li a {
    display: inline-block;
}

Answer 2

您是否尝试过放置

<a href...>

之外的

标签

<li>

标签而不是里面？我知道有时候这会对我产生影响。

Answer 3

您的“.navbar-fixed-top”div与“#option”栏重叠！

您可以通过设置验证：

.navbar-fixed-top{
z-index: -5;
}

编辑：这不会破坏网站的外观。

#options{
position:relative;
z-index: 9999;
}

希望这能指出你正确的方向！

在Firefox和其他人遇到ul问题

3 个答案: