Can’t really work out what effect you are going for but if you want the hover to be bigger than the normal state without interrupting the flow then do something like this.
Okay. I’m trying to make some adaptations with a Superfish menu on the submenu level here, but apparently my UL is too wide or my hover background is too narrow. I’m also trying to adapt some space between the border and the left and right side of the line item so it would look more like the attached.
You’d do it much like I said above and remove the width and use negative margins to pull the element outside the parent.
Roughly like this:
.sf-menu li ul li a:focus, .sf-menu li ul li a:hover, .sf-menu li ul li a:active {
width:auto;
float:none;
display:block;
margin:-10px -20px 0 -10px;
padding:0px 20px 0px;
height:58px;
line-height:58px;
}
You are applying the image to the anchor and to the list elements and you also did the same with my code above.
Just use this and comment out the code as shown.
[B]/*.sf-menu li ul li:hover, .sf-menu li ul li:hover,*/[/B]
.sf-menu li ul li a:focus, .sf-menu li ul li a:hover, .sf-menu li ul li a:active {
text-align: left;
background-color: none;
[B] margin:0 -23px;[/B]
padding-left: 30px;
padding-right: 23px;
background: url(http://rewebbed.net/wvg/templates/wvgs/images/menu_item_bkgr_hs.png) no-repeat 0 0;
display:block;
font-size: 16px;
color: #FFF;
}