SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie needs help properly formatting a nested list

    Hello! I am a bit of a noob and I can't figure out where I'm going wrong with this code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Demo</title>
    	<style type="text/css">
    		#menu{ width:160px; padding:0 1em; }
    		#menu .has_children { background: url('images/arrow-right-white.gif') no-repeat 100% 50%; }
    		#menu .has_children:hover { background: url('images/arrow-right-yellow.gif') no-repeat 100% 50%; }
    		#menu ul { margin:0; padding:0; background-color:red; }
    		#menu ul li { padding: 2px 3px; list-style:none; color: white; border-bottom: 1px solid white; cursor:pointer; }
    		#menu ul li:hover { background-color:pink; color: yellow; position:relative; }
    		#menu ul li a { text-decoration: none; color: white; display:block; }
    		#menu ul li a:hover { background-color:pink; color:yellow; }
    		#menu ul ul { display:none; position:absolute; left: 110px; top:7px; border:1px solid white; background-color:#0000A0; }
    		#menu ul li:hover ul { display:block; }
    		#menu ul ul li { border-bottom; 1px solid white; width:170px; padding:2px 3px; float:left; display:inline; }
    		#menu ul ul li:hover { text-decoration:underline; border:none; }
    	</style>
    </head>
    <body>
    	<div id="menu">
    		<ul>
    			<li><a href="#">Item 1</a></li>
    			<li class="has_children"><a href="#">Item 2</a>
    				<ul>
    					<li><a href="#">Item 2.1</a></li>
    					<li><a href="#">Item 2.2</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Item 3</a></li>
    		</ul>
    	</div>
    </body>
    </html>
    When I hover over Item 2 the pink does not cover the entire block. Why is that?

    Also, I would like to have the block stay pink as I look at Item 2's children. How do I do that?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    Move the padding from the list to the anchor to stop the gap on the background.

    To keep the menu alive when hovered the set the anchors background color when the list is hovered.

    e.g.
    Code:
    #menu ul li:hover a{background:pink}/* keep active while list is hovered*/
    #menu ul li:hover li a{background:transparent}/* turn of nested list anchors or they will go pink also*/
    Here's the revised code and a typo fixed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Demo</title>
    <style type="text/css">
    #menu {
        width:160px;
        padding:0 1em;
    }
    #menu .has_children {
        background: url('images/arrow-right-white.gif') no-repeat 100% 50%;
    }
    #menu .has_children:hover {
        background: url('images/arrow-right-yellow.gif') no-repeat 100% 50%;
    }
    #menu ul {
        margin:0;
        padding:0;
        background-color:red;
    }
    #menu ul li {
        padding:0;
        list-style:none;
        color: white;
        border-bottom: 1px solid white;
        cursor:pointer;
    }
    #menu ul li:hover {
        background-color:pink;
        color: yellow;
        position:relative;
    }
    #menu ul li a {
        text-decoration: none;
        color: white;
        display:block;
        padding:2px 3px;
    }
    #menu ul li:hover a{background:pink}
    #menu ul li:hover li a{background:transparent}
    #menu ul li a:hover {
        background-color:pink;
        color:yellow;
    }
    #menu ul ul {
        /*display:none; don't use this as bad for accessibility*/
        margin-left:-999em;/* use this method of hiding instead */
        position:absolute;
        left: 130px;
        top:5px;
        border:1px solid white;
        background-color:#0000A0;
    }
    #menu ul li:hover ul {
        margin-left:0;
    }
    #menu ul ul li {
        border-bottom:1px solid white;
        width:170px;
        float:left;
        display:inline;
    }
    #menu ul ul li:hover {
        text-decoration:underline;
    }
    </style>
    </head>
    <body>
    <div id="menu">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li class="has_children"><a href="#">Item 2</a>
                <ul>
                    <li><a href="#">Item 2.1</a></li>
                    <li><a href="#">Item 2.2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </div>
    </body>
    </html>
    I should point out for completeness that this won't work in IE6 as it doesn't understand hover on anything but anchors. You'd need a JS snippet to help IE6 along.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! How did you know the anchor did the trick? I don't understand how that makes a difference.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by MrSnrub View Post
    Thanks! How did you know the anchor did the trick? I don't understand how that makes a difference.
    You added an image to the li.haschildren list element thus cutting out the pink background.

    You could also have fixed it this way.

    Code:
    #menu .has_children:hover { background:pink url('images/arrow-right-yellow.gif') no-repeat 100% 50%; }
    (assuming pink was a valid keyword).


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
  •