Latest Lists

Proper Unordered List with sub-headers and footers?

http://www.goonsquad.org/sample.gif That's what I am trying to do, with a formatting similar to this: <div id="nav"> <ul> <li class="header">Products</li> <li>Link</li> <li>Link</li> <li>Link</li> <li class="header">Services</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> I am just not sure what the CSS should be? I only need the header and footer help, adding a 1px border to the left and right of the links is not that challenging ;)

Public Comments

1. First, I would probably change the format of your XHTML to something more intuitive, like the following: <div id="nav"> <div class="nav_submenu"> <h1>Products</h1> <ul> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> <div class="nav_submenu"> <h1>Services</h1> <ul> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> </div> The navigation DIV contains two sub-navigation DIVs, each of which has a title (in the form of a header, though you can use a span if you would like) and an unordered list of links. From here, we would use CSS to style the each sub-navigation menu, like below: #nav { width: 150px; } div.nav_submenu { background-color: beige; margin-bottom: 10px; border: 1px solid #F0F; } div.nav_submenu h1 { font-size: 12pt; font-weight: bold; text-align: center; } div.nav_submenu ul { ./* however you'd like to style */ } check out http://www.w3schools.com/css/default.asp for more
2. I agree with Danriths V, this should be two seperate lists, or at least two seperate items of the "nav" list. you can also write the HTML like this: <ul id="nav"> <li class="header">Products <ul class="subnav"> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </li> <li class="header">Services <ul class="subnav"> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </li> </ul> This would group the list of services under the services item. And, now you don't need the containing divs as the uls become the containers.