:before :after and <li> Rollover

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

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