是否可以在CSS中重新创建此菜单？

Question

翻转文本，下面的蓝色块沿蓝线移动。如果我通过相对位置进行操作并将蓝色块设置为前20px，它也会将文本向下移动。

有没有办法可以纯粹用CSS做这个，或者我应该使用上半部分设置为透明gif和底部蓝色的背景图像？

到目前为止，我尝试过的代码是：

#menu ul {
    list-style:none;
    margin:0;
    padding:10px;
    text-align:center;
}
#menu ul li {
    display:block;
    float:left;
    list-style:none;
    margin-right: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 39px;
}
#menu ul li a {
    display:block;
    margin:0px;
    padding:0px;
    color:#FFF;
    text-decoration:none;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 5px;
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
}
#menu ul li a:hover {
    color:#fff;
    margin-bottom:5px;
    padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
    color:#fff;
    background-color: #0488C5;
    font-weight:bold;
}

我仍在学习任何错误的借口！

Answer 1

Click here for a demo

​<ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
</ul>

ul {
    width: 100%;
    border-bottom: 3px solid blue;
    overflow: hidden;
}

li {
    float: left;  
    margin: 0 20px 0 20px;                
}

li a {
    border-bottom: 20px solid #fff;
    display: block;
}

li a:hover, .active {
    border-bottom: 20px solid blue;
}

然后，您可以将悬停状态用于另一个名为“active”的类，您可以在该页面上应用该类。

您应该能够调整此示例以满足您的需求。

您不需要任何图像。 CSS非常有能力为你做到这一点。

Answer 2

....................................

的 Live demo 的

嗨，现在这可以用于after in css

这是一个简单的例子

<强> HTML

<ul>
  <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home</a></li>
</ul>

<强>的CSS

   ul{
list-style:none;
  border-bottom:solid 10px blue;
}
li{
display:inline-block;
  vertical-align:top;
  background:red; 
}
li a{
text-decoration:none;
  display:inline-block;
  vertical-align:top;
  position:relative;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
}

li:hover a:after{
content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;
  background:blue;
}

的 LIve demo 的

Answer 3

将三个锚点放在无序列表中，并通过将列表显示设置为无浮动列表项目使其显示为内联。进一步为每个锚添加一个空跨度，您可以使用：hover伪选择器设置样式。

学习CSS，很有趣！