当边框底部到整个菜单div时，边框底部链接在菜单上悬停

Question

所以我正在制作一个菜单，但是我遇到了一个带边框底部菜单和链接的问题，这些菜单在悬停时边框底部与菜单边框位于同一条线上。我画了一个样本图片来帮助你。

由于我没有足够的声誉，请点击链接查看图片。 - ＆GT; http://ctrlv.in/478501＆lt; -

无需添加颜色或动作等特殊效果，只需添加边框。请帮忙

Answer 1

这是你在找什么？

HTML

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

CSS

li{
  list-style-type: none;
  background: #f5f5f5;
  float: left;
  padding: 8px 15px;
  border-bottom: 2px solid #CCC;
}

li:hover{
  border-bottom: 2px solid red;
}

FIDDLE

<强>更新

NEW FIDDLE

NEW UPDATE

THIRD FIDDLE