:before :after and <li> Rollover - css

Question

I hope someone can guide me towards the right direction. I was learning how to use the :before and :after in CSS, so I tried to create a menu navigation, somehow I managed to make it how I wanted with displaying the right shadow image as :before and a :after but now as soon as I roll over my menu it goes up. I tried to put padding and margin with !important but nothing worked.
My second problem is in <li> I have a link <a> but it only changes color of rollover on text. I want to change the color on the whole menu <li> but it doesn't work. My code is in this JsFiddle:
HTML:
<div id="menu">
<ul>
<li class="proxima_bold">Menu1</li>
<li class="proxima_bold">Menu2</li>
<li class="proxima_bold">Menu3</li>
<li class="proxima_bold">Menu4</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;
}
Please let me know how to fix this.
I HAVE FIXED IT MYSELF. Thank you all for your time.

Answer 1

Is this what you want? I am not sure what the images are supposed to do.
jsfiddle