Question

我希望有人能引导我走向正确的方向。我正在学习如何在CSS中使用：before和：after，所以我尝试创建一个菜单导航，不知怎的，我设法让它成为我想要的显示正确的阴影图像：before和a：after但是现在很快当我滚动菜单时，它会上升。我尝试用!important填充填充和边距，但没有任何效果。

我的第二个问题是<li>我有一个链接<a>，但它只会改变文本上的翻转颜色。我想更改整个菜单 <li>的颜色，但它不起作用。我的代码在这个JsFiddle：

HTML：

<div id="menu"> 
    <ul>
        <li class="proxima_bold"><a href="#">Menu1</a></li>
        <li class="proxima_bold"><a href="#">Menu2</a></li>
        <li class="proxima_bold"><a href="#">Menu3</a></li>
        <li class="proxima_bold"><a href="#">Menu4</a></li>

    </ul>
</div>

CSS：

#menu {
  text-transform:uppercase;
  position:relative;
}

#menu ul{
    margin: 0; padding: 0;
    float: left;
    margin-top:-10px !important;
    color:#787878;
}
#menu ul li{
    display: inline;
    float: left; 
    padding: 20px 15px 20px 15px;
    color:#787878;
    background: url(http://www.example.com/p7lpz) no-repeat 0 20px;  
}

#menu ul li:hover{ 
  background: url(http://www.example.com/2v4ik) repeat-x; 
  padding:0;
  margin:0; 
  color: #7fc652 !important;
  cursor:pointer;
}

#menu ul li a {  
  color: #787878;
  display:inline-block;
}
#menu ul li a:hover {  
  color: #7fc652;
}

#menu ul li:hover:after, 
#menu ul li:hover:before{
  content: "";
  position:relative;
  top:0;
  width:15px;
  height:55px;
  display:inline-block;
  vertical-align:middle; 
}

#menu ul li:hover:after{ 
  right: -15px;
  background: url(http://www.example.com/9tly4) no-repeat 0 0;  
}

#menu ul li:hover:before{ 
  left: -15px;
  background: url(http://www.example.com/u969z) no-repeat 0 0;  
}

#menu ul li .selected{
    float: left; 
    text-decoration: none;
    font-weight:bold;
    color: white;
    padding: 0 20px 0 20px;
    color:#444;
    background: url(http://www.example.com/p7lpz) no-repeat 0 0; 
}

请让我知道如何解决这个问题。

我已经固定了我自己。谢谢大家的时间。

Answer 1

这是你想要的吗？我不确定图像应该做什么。

jsfiddle

：before：after和<li> Rollover </li>

1 个答案: