Newbie needs help properly formatting a nested list

HTML & CSS
1

Hello! I am a bit of a noob and I can’t figure out where I’m going wrong with this 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

Hi,

Welcome to Sitepoint :slight_smile:

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.


#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.


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

Thanks! How did you know the anchor did the trick? I don’t understand how that makes a difference.

4

You added an image to the li.haschildren list element thus cutting out the pink background.

You could also have fixed it this way.


#menu .has_children:hover { background:[B]pink [/B]url('images/arrow-right-yellow.gif') no-repeat 100% 50%; }

(assuming pink was a valid keyword).