显示常规导航菜单中未显示的响应式菜单链接

Question

我想在隐藏在常规页面导航中的移动菜单中显示一个链接。我删除了“主页”导航链接

<li id="home-menu"><a href="./index.html">HOME</a> </li>

从 style.css 第 60 行中的常规网页视图，使用 display:none 的替代方法，在此讨论：http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont。

#home-menu {
  position: absolute;                           
  overflow: hidden; 
  clip: rect(0 0 0 0);                         
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0;          
}

现在，我想启用移动菜单列表中的“主页”链接。在styles.css的第176行，我尝试显示#home-menu，

#home-menu {
display: inline-block;
}

但它不会显示在响应式菜单中。我真的很想避免使用！important。我很感激学习如何解决这个问题。我的例子是http://nspowers.org/ask/display/

Answer 1

这里有很多事情要做，所以在不涉及太多细节的情况下，我会建议一个更简洁的替代方案：

删除绝对定位及其相关规则，改为使用display: none; 最初隐藏#home-menu - 然后在移动断点处添加display: block; 使其重新出现：

header#topnav nav ul li#home-menu {
    display: none; /* Also remove the !important rule from here */
    /* position: absolute;                           
    overflow: hidden; 
    clip: rect(0 0 0 0);                         
    height: 1px; width: 1px; 
    margin: -1px; */
    padding: 0; border: 0; 
}

让 home 重新出现在较小的设备上：

@media only screen and (max-width: 579px) {
   header#topnav nav ul li#home-menu {
       display: block; 
   }
}

这似乎是一个更简单、更易于维护的解决方案，而且您不需要重写这么多规则。

---

^{如果您对选择器的工作原理感到困惑，请阅读选择器特异性 - 请参阅：http://www.w3.org/TR/css3-selectors/#specificity、http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ 和 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 了解更多信息。}

Answer 2

你正在剪裁它并且有 1px 的高度和宽度，所以你还需要覆盖这些属性：

#topnav nav ul li {
    float: none;
    margin: 0;
    clip: auto; //reset clip to not clip
    height: auto; //allow height to expand
    width: 100%; //matches rest of menu elements
    position: relative; //allow to flow above rest of elements instead of overlap first one
}

您在第 117 行也有这个，由于您使用的选择器的特殊性，它覆盖了您的 display: inline-block。您可以在开发者工具中看到这一点：

#topnav nav ul li {
    display: block;
    float: left;
    font-size: 1.7em;
    margin-right: 30px;
}