Page 1 of 1

Need help with CSS formatting of nested lists

Posted: Thu Jun 28, 2007 3:16 pm
by RobertGonzalez
Okay, this one has me totally out of my mind. What I want to do is take a list of lists and turn the highest list into a horizontal navigation and use the nested lists as their own horizontal navigation under their respective list item parent. Something like this...

Code: Select all

Group 1 | Group 2 | Group 3 | Group 4
-------------------------------------
Subgroup 1-1 | subgroup 1-2 | subgroup 1-3
I also want it so that a :hover over the Group headings (which are not links) will cause the sub groups for each hovered group to show.

I have seen this using all sorts of nasty hacks, UL's inside of spans and other weird stuff. I have the Group list worked out, but for the life of me I cannot seem to get even one subgroup to show. Can anyone help me?

My markup and CSS are as follows:

Code: Select all

<!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" xml:lang="en" lang="en">
<head>
  	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="My description" />
	<meta name="keywords" content="<span style='color:blue' title='I'm naughty, are you naughty?'>smurf</span> off, violently frustrated, hoping to eat lunch soon" />
	<meta name="robots" content="none" />
	<meta name="author" content="Grump Grumperson" />
	<title>Title this</title>
	<style type="text/css">
		/**
		 * Navigation
		 */
		#navigation {
			background: transparent url('images/nav-background-left.png') no-repeat left center;
			height: 80px;
			min-height: 80px;
			max-width: 1500px;
			padding: 0;
			margin: 0;
		}

		#navigation ul li span {
			display:none;
		}

		#navigation ul {
			list-style-position: outside;
			list-style-type: none;
			list-style-image: none;
			background: transparent url('images/nav-background-right.png') no-repeat right center;
			height: 80px;
			min-height: 80px;
			margin: 0;
			padding-left: 15px;
			font-size: 14pt;
			font-family: Verdana, Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
			
		}

		#navigation ul li {
			display: inline;
			padding: 0 20px;
			line-height: 45px;
			border-left: 1px solid #fff;
			
		}

		#navigation ul li.first {
			border-left: none;
			padding-left: 0;
		}

		#navigation ul li.first span
			display: block; 
			position: absolute; 
			white-space: nowrap;
		}
	</style>
</head>
	
<body>
<div id="navigation">
	<ul>
		<li class="first">Group 1
			<span><ul>
				<li><a href="#" title="Title">SG 1-1</a></li>
				<li><a href="#" title="Title">SG 1-2</a></li>
				<li><a href="#" title="Title">SG 1-3</a></li>
				<li><a href="#" title="Title">SG 1-4</a></li>
			</ul></span>
		</li>
		<li>Group 2
			<span><ul>
				<li><a href="#" title="Title">SG 2-1</a></li>
				<li><a href="#" title="Title">SG 2-2</a></li>
				<li><a href="#" title="Title">SG 2-3</a></li>
				<li><a href="#" title="Title">SG 2-4</a></li>
			</ul></span>
		</li>
		<li>Group 3
			<span><ul>
				<li><a href="#" title="Title">SG 3-1</a></li>
				<li><a href="#" title="Title">SG 3-2</a></li>
				<li><a href="#" title="Title">SG 3-3</a></li>
				<li><a href="#" title="Title">SG 3-4</a></li>
			</ul></span>
		</li>
		<li>Group 4
			<span><ul>
				<li><a href="#" title="Title">SG 4-1</a></li>
				<li><a href="#" title="Title">SG 4-2</a></li>
				<li><a href="#" title="Title">SG 4-3</a></li>
				<li><a href="#" title="Title">SG 4-4</a></li>
			</ul></span>
		</li>
		<li>Group 5
			<span><ul>
				<li><a href="#" title="Title">SG 5-1</a></li>
				<li><a href="#" title="Title">SG 5-2</a></li>
				<li><a href="#" title="Title">SG 5-3</a></li>
				<li><a href="#" title="Title">SG 5-4</a></li>
			</ul></span>
		</li>
	</ul>
</div>

</body>
</html>
As usual, all help is always appreciated.

Posted: Thu Jun 28, 2007 4:30 pm
by superdezign
I don't believe that it is valid to put a block element inside of an inline element (<ul> in <span>).

Anyway, as long as IE6 is in use, you'll need JavaScript for the hovering as they don't support li:hover, div:hover, and such. I've actually got it queued in my to-do list to write a navigation exactly like the one you've describe and write a tutorial for it on my blog. I haven't got to it yet due to my color slider's tutorial.


The way you'll need to do this is take the main <ul> as a large block element that will be as big as the entire new navigation. So, if you're line-height (or element height, or font height, or however you decided to determine the height of the elements) for the top menu and sub menus are 1em, you're main <ul> would have a height of 2em. You'd put a position:relative on it to set up the children for absolute positioning. The main menu <li> elements would all be floated to fit onto one line, and then you'd be set for the submenu items.

From here, you nest the sub menu items. Then, all submenu <ul> elements would need to be absolutely positioned in the same place: bottom:0, left:0. You'd apply a display:none (or visibility:hidden... your choice) to the submenu <ul> elements, and apply a float:left to all submenu <li> elements.

The display upon hovering wouldn't be all CSS. For everyone but IE users, you could simply use li:hover ul { display: block; } on the main menu list items. But for IE users, you'd have to use JavaScript to display the submenus.

If it doesn't work, tell me. I haven't got a chance to actually write this down yet, so I may have missed something.

Posted: Thu Jun 28, 2007 5:42 pm
by RobertGonzalez
I am working on a few things right now to get what I want. I have it displayed, but not changing on hovers yet. I made the headings links because I will actually be making pages for them.

If I come up with something hot I will post it back here.