background-img and background color in one <li> element

Hi!
I'm creating vertical menu on <ul> element and I want it to have every <li> element a background image (just before the text). It's all situated in a box made of div's. Everything is OK, but I also want a line of the menu, which is hovered, to have some background-color. The problem is, that I made a padding-left to a left border of a box, so the background (image) of each <li> is placed nicely but at the same time, background-color of hovered element is shifted from the left side. You can see it on the pic below (I marked the problem with a red circle). Any suggestion how to make a background-color, to fill the line from the very left?

<div class="menu">
<p class="title">Menu title</p>
 <ul>
  <li><a class="menu" href="some.eu">First line</a></li>
  <li><a class="menu" href="some.eu">Second </a></li>
  <li><a class="menu" href="some.eu">Next...</a></li>
 </ul>
</div>

HTML:

p.title {
	font-weight:bold;
	color: #0979c7;
	font-size: 20px;
	padding:8px 0px 10px 10px;
	
}
div.menu {
	width:218px;
	padding-bottom:10px;
}
.menu ul  {
    color: #6e6e6e;
	list-style: none;
	margin:5px 0px;
	padding:0px;
}

.menu ul li {
	min-height:24px;
	padding-left:10px;
	display:block;
	line-height:24px;
	color: #6e6e6e;
}

.menu a{
	background:url(img/arr_gray.gif) no-repeat left top;
	background-position: 0 10px;
	padding-left:10px;
	vertical-align:top;
	display:block;
	line-height:24px;
	color: #6e6e6e;
	text-decoration:none;
}

.menu a:hover{
	background:url(img/arr_blue.gif) no-repeat left top;
	background-position: 0 10px;
	margin-left:-1px;
	text-decoration:underline;
	display:block;
	min-height:24px;
	line-height:24px;
	color: #ffffff;
	background-color: #0979c7;
}

Code (markup):

 

1) I smell a div for no reason.

2) that's a heading, not a paragraph, use a heading tag.

3) People know what a menu is, you probably don't need to put a heading on it.

4) if every anchor is getting the same class, they don't need a malfing class! (every time I see that I feel the need to bitch slap whoever's propagating that)

5) You are declaring things like color over and over again for no good reason.

6) You are redeclaring line-height over and over for no good reason.

7) PX line-height should probably go with px fonts - NOT that I would be using EITHER.

7) not sure what you mean by shifting - nothing is moving. You want more padding on the left side, put more padding on the image or position it... since you seem to be using 'left top' positioning would be fine. Add however many px you want ... oh wait, I see it. You padded the LI.

Do yourself a HUGE favor, set the LI to display:inline, and then pretend they don't even EXIST.

Step one, let's get rid of the div and unnecessary classes. I'll leave the HEADING on for now.

<h2>Menu title</h2>
<ul class="menu">
  <li><a href="some.eu">First line</a></li>
  <li><a href="some.eu">Second </a></li>
  <li><a href="some.eu">Next...</a></li>
</ul>

Code (markup):

Step two, let's clean up your CSS. I'm going to keep the px metric fonts for now but really those should be pitched in the trash unless there are going to be more image interactions. %/EM exists for a reason, use them.

Which would go something like this:

h2 {
	font:bold 20px/22px arial,helvetica,sans-serif;
	color:#0979c7;
	padding:8px 10px 15px;
}

.menu {
	list-style:none;
	width:218px;
	padding-bottom:15px;
	font:normal 14px/16px arial,helvetica,sans-serif;
}

.menu li {
	display:inline; /* just get these the *** out of the way */
}

.menu a{
	display:block;
	padding:4px 10px 4px 20px;
	text-decoration:none;
	color:#666;
	background:url(img/arr_gray.gif) 10px 10px no-repeat;
}

/*
	don't forget the other two states for keyboard users
	:active and :focus !!!
*/

.menu a:active,
.menu a:focus,
.menu a:hover{
	text-decoration:underline;
	color:#FFF;
	background-color:#0979c7;
	background-image:url(img/arr_blue.gif);
}

Code (markup):

Though I'd also look into maybe adding a dummy span inside the anchors to apply that arrow image to, that way you could use a single image and slide it instead of wasting a handshake on a second image (much less eliminate the delay in it appearing first hover).

Really I think a lot of your problem though was that you over-thought your margins/padding and redeclare the same thing WAY too many times.