-4

菜单

滚动文本，下面的蓝色块沿着蓝线移动。如果我通过相对位置进行操作并将蓝色块设置为顶部 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;
}

我还在学习，请原谅任何错误！

4

3 回答 3

2

单击此处进行演示。

​<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;
}

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

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

您不需要任何图像。CSS 完全有能力为您做到这一点。

于 2012-09-13T10:00:41.757 回答
1

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

现场演示

嗨，现在这可以用来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;
}

现场演示

于 2012-09-13T10:01:36.023 回答
0

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

学习 CSS，很有趣！

于 2012-09-13T09:57:50.857 回答