html - 在 firefox 和其他浏览器中遇到 ul 问题

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

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

您可以通过设置来验证这一点:

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

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

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

希望这能为您指明正确的方向!