CSS Menu Hover That Overflow LI Item

HTML & CSS
1

I would like to know how the hover on this menu item is accomplished with the use of CSS.

Is this nothing more than a gradient background image with the use of border -radius and width that overflows the original size of the ‘LI’ item?

Such as:
li a {
width: 189px;
padding: 11px 23px;
background: #FFF;
color: #333;
font: blah blah
border-bottom: 1px solid #333;
text-align: left;
}

li:hover {
width: 181px;
padding: 11px 31px;
background: #a71b17 url(imageblah.jpg) no-repeat 0 0;
box-shadow: yada yada;
border-radius: blah blah;
color: #FFF;
font: blah blah;
border-bottom: none;
text-align: left;
}

I’m open to suggestions.

Thank you!

2

Hi,

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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul {
	list-style:none;
	margin:20px;
	padding:0;
}
li {width:235px}
li a {
	padding: 11px 23px;
	background: blue;
	color: #333;
	border-bottom: 1px solid #333;
	text-align: left;
	display:block;
}
li a:hover {
	background: #a71b17 url(imageblah.jpg) no-repeat 0 0;
	border-radius: 5px;
	padding: 21px 23px;
	color: #FFF;
	border-bottom: none;
	margin:-10px -10px 0;
	position:relative;
}
</style>
</head>
<body>
<div class="test">
	<ul>
		<li><a href="#">Here</a></li>
		<li><a href="#">There</a></li>
		<li><a href="#">Everywhere</a></li>
	</ul>
</div>
</body>
</html>
3

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.

4

Hi,

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

okay, I’ve managed to get a lot done but now I see doubles when I hover over the submenu item.

I’ve also noticed that the hover doesn’t work in Safari.

6

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

OH Thank you!

So I applying to both li’s that was causing the double-vision.

So then what was causing Safari not to show the hover? Was it because of the extra ‘hover’ line that was causing a conflict in Safari?

8

Yes it worked as soon as the rule made sense :slight_smile: