Question

所以我一直在研究昨天我得到的帮助，而且我非常接近。我的代码现在更干净了。我有2个问题仍然需要解决。我整个上午一直在努力，似乎无法得到它。

我需要控制subnav的高度。我不得不将“ul li a”的高度从像素改为100％，所以至少现在它只是环绕文本，这没关系，但我可能需要最终改变那个高度而不想这样做通过增加字体大小。
- 答案 - 我在subnav中添加了％的缩减，您将看到基于设计的原因。这个问题是，一旦你慢慢地将鼠标移动到空白区域，子导航就会消失。如果你做得足够快，你有时可以抓住它。我对subnav中的垂直间隔器有同样的问题，但在css中进行了一些重新排列，现在似乎已经修复了。有什么建议吗？
我是否可以使用单一措辞链接中心而不会影响多措辞链接的垂直居中？
有没有更好的方法来添加“边距或缓冲区”而不是我正在使用的“间隔符”，或者这是“好的”？

http://codepen.io/Compton/pen/iwKJm

- 更新的CODEPEN -

http://codepen.io/Compton/pen/ufGCI

提前致谢。

Answer 1

对于第四点，您不需要为每个列表项之间的每个“空格”添加一个空列表项，这是不好的做法，因为列表项实际上是用于某些东西，而不是空白空间！ / p>

相反，为什么不简单地修改你的ul li类，以便添加一个margin-right属性：

ul li {
    float:left;
    width: 14%;
    display:block;
    **margin-right: 5px;**
    text-align:center;
}

这将获得与拥有这些空格相同的效果，因此您可以从html中删除它们。

Answer 2

问题是由你添加到.subnav类的边距引起的：当鼠标从上面的列表项移动到子列表时，鼠标必须移动0.333％的间隙，导致失去焦点（或失去悬停效果）。我更新了你的代码并删除了不必要的间隔符，更新版本可以在这里找到： http://codepen.io/anon/pen/hzAaD 参考原始代码，按如下方式更改CSS：

 .subnav ul li {    
   margin: 0;
   margin-top: 3px;
 }
 .subnav {
   width:100%;
 }

我的水平subnav还有几个问题...但几乎就在那里

2 个答案: