SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Menu Hover That Overflow LI Item

    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!
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <!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. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .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. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Red face

    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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    /*.sf-menu li ul li:hover, .sf-menu li ul li:hover,*/
    .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;
    	margin:0 -23px;
    	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. #7
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    822
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by toad78 View Post
    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?
    Yes it worked as soon as the rule made sense


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •