Issue on Bootstrap Dropdown List Hover Higlight - css

Question

I am trying to add image/Icon to bootstrap dropdown btn list options HERE
It works somehow but as you can see from the demo and following image the hover function does not reacting (highlighting)on the whole li area!
Can you please let me know how to fix this highlits all width of the li element?
Here is my code as well
CSS:
li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}
and the HTML
<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="one">Item 1</li>
<li class="two">Item 2</li>
<li class="three">Item 3</li>
<li class="four">Item 4</li>
<li class="five">Item 5</li>
<li class="six">Item 6</li>
<li class="divider"></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Thanks

Answer 1

Using list item background as an icon is a bad idea since it makes laying on the text really tricky (as you experienced).
I'd definitely encourage you to add a new, separate element for the icons. By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>. If you want custom icons, you can of course define your own classes and related CSS styles.
Here's a quick example:
HTML:
<li class="one"><i class="icon-custom-1"></i>Item 1
CSS:
.icon-custom-1 {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 0px 7px;
width: 60px;
height: 25px;
}
On a related note, you can wildcard all icon-* styles so you don't have to copy&paste the same stuff everywhere:
div[class*='icon-custom-'] {
/* Insert common CSS styles here */
}
Note that I'm using extra custom- to separate this custom icon formatting from icons provided natively by bootstrap.
Happy bootstrapping!

Answer 2

If you're simply looking to have the highlight extend to the right when hovered I would suggest removing the width: 60px; from each of your li.one, li.two etc.
Maybe add some extra margin on your li a selector as well to reduce the overlap.
Overall I would agree with jsalonen that you should look into utilizing the built-in icon code in Bootstrap.