:before :after 和 <li> 翻转

Question

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

我的第二个问题是在 <li> 我有一个链接 <a> 但它只会改变 text 上的翻转颜色。我想更改整个 menu <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