html - 将两个边框合并为一个并将每个功能设置为 hover li

Question

这里有两个问题:

首先:我有四个 <li>它的显示是内联 block 并向左浮动。我想要 EACH <li> 具有鼠标悬停时 红色边框底部的样式。

第二:我想让文本的边框底部与其包装器的边框底部重叠(在本例中是 <ul> 的 <li>。)

<ul id="menu">
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
</ul>

和

#menu {
  list-style:none;
}

#menu li {
  display:inline-block;
}

#menu:hover li {
display:inline-block;
border-bottom:solid 5px red;
}

这是我的 Fiddle

在 fiddle 中，蓝色边框与红色边框分开。我希望它们成为一个边界。

Answer 1

只需将您的 CSS 更改为:

#menu li:hover {
    display:inline-block;
    border-bottom:solid 5px red;
    margin-bottom:-5px;
}

首先，你想将 :hover 应用到正在悬停的单个 li 上，而不是所有 li 当 ul 是悬停，然后你想用应用边框的宽度偏移它的底部(通过负数margin-bottom`实现)。

Demo Fiddle