悬停时导航栏上的间距

Question

我的导航栏有问题。当我将鼠标悬停在导航栏上的“关于”或“文本”上时，它会在按钮的左侧显示一个间距，我希望它的悬停颜色包含按钮的整个宽度。

https://jsfiddle.net/jdd3h0sf/3/

HTML：

<div id="nav">
<ul> 
    <li class="home"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Text &#8964;</a>
      <ul class="submenu">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact &#8964;</a>
        <ul class="submenutwo">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
</ul>

CSS：

#nav { 
    background-color: #333;
    height: 52px;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#nav li  {
    border-right: 1.8px solid #191919;
    height: auto;
    width: 156.5px;
    padding: 0;
    margin: 0;
}
.home  {
   border-left: 1.8px solid #191919;
}
#nav ul li { 
    display: inline-block;
}
#nav ul li:hover { 
    background-color: #444;
}
#nav ul li a, visted { 
    color: #ccc;
    display: block;
    padding: 15px;
    margin: 0;
    text-decoration: none;
}
#nav ul li a:hover { 
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul { 
    display: none;
    position: absolute;
    background-color: #444;
    border: 1px solid #333;
    border-top: 0;
    max-width: 169px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:visited {
    color: #ccc;
}
#nav ul ul li a:hover {
    color: #2980B9;
}

Answer 1

这是display:inline-block;的一部分。如果您希望将它们显示为inline-block，则有几种不同的解决方案(Read a css-Tricks article about it)：

1 - 更改HTML格式：

更改<li>的html，如下所示：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

或者这个：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

甚至还有评论，例如：

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

或者，只需将所有li放在一行：

<ul><li>one</li><li>two</li><li>three</li></li>

它很乱，但很有效。

2 - 负边距：

非常简单：

li{
  display: inline-block;
  margin-right: -4px;
}

3 - 略过结束标记：

这实际上在HTML5中非常好，li不必有结束标记。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

4 - 将<ul>的字体大小设置为0：

ul {
  font-size: 0;
}
ul li {
  font-size: 16px;
}

5 - 或者，只需浮动<li>：

无论你的船漂浮着什么。

Answer 2

您遇到了dreaded inline-block spacing issue。在您的小提琴中，如果您将所有li元素压缩到同一行，则悬停按预期工作。链接的文章概述了其他一些选项。

你也可以只float元素来解决这个问题。

#nav ul li { 
    float: left;
}