Jump to content

layout a list within a list


Recommended Posts

Hi,I have a unordered list returned by the wordpress wp-list pages PHP command.The list contains sub lists.Basically the main list is the main level pages and each main level page has sub pages/linksI have made a page that contains just an example and all the css.3 main pages the first of which has 2 sub pagesI want the sub pages to align left with the Main page, no indent.I also would like to close up the gap between Main page 1 and Main Page 2.What is the best way to do it?It should look like this (I had to put underlines just to make the spacing here)about_______elementary school_______middle schoolmission andphilosophyhistory

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style>ul#menu {margin:0; padding:0;}ul#menu li {font-size:0.916em; float:left; margin-right:1.819em; padding:0; display:block; list-style:none;}ul#menu li a:link, ul#menu li a:visited {display:block; padding:7px 0 10px; line-height:1em; width:9.08em; color:#6a797d; font-weight:bold; text-decoration:none; border-top:3px solid #fff; text-transform:lowercase;}ul#menu li a:hover {border-top:3px solid #ff8a00;}ul#menu li a span {font-size:0.833em; color:#d1d9dc; text-transform:lowercase;}ul#menu li a.selected {border-top:3px solid #6a797d;}ul#menu .last {margin-right:0;}ul#menu li li { float:none; } /* this is the sub list */ul#menu li li { margin:0 0 0 0; }ul#menu li li { padding:7px 0 5px 0; }</style><title>Untitled Document</title></head><body>			<ul id ="menu">  <li class="page_item page-item-2 current_page_ancestor current_page_parent"><a href="http://gasolicious.com/test/about/" title="About">About</a><ul class='children'>	<li class="page_item page-item-76 current_page_item"><a href="http://gasolicious.com/test/about/mission-and-philosophy/" title="Mission and Philosophy">Mission and Philosophy</a></li>	<li class="page_item page-item-78"><a href="http://gasolicious.com/test/about/history/" title="History">History</a></li></ul></li><li class="page_item page-item-21"><a href="http://gasolicious.com/test/notebook/" title="Elementary School">Elementary School</a></li><li class="page_item page-item-12"><a href="http://gasolicious.com/test/my-portfolio/" title="Middle School">Middle School</a></li></ul>			<div class="clearboth"><!-- --></div>		</div>	</div></body></html>

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...