Jump to content

Nav Menu With Horizontal And Vertical Lists


music_lp90
 Share

Recommended Posts

Hey all, I am getting close to having my nav styled the way I want it, but am having trouble figuring out how to make the 2nd level list items stay on the same horizontal line when there is no width specified for the 2nd level "ul". I'll paste the code below, what I want is for the 2nd level list items ("Who we are" "Who we serve" etc.) to be what determines the width of the 2nd level "ul" not the other way around.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body { background-color:#cccc99; }/* families tier 1 */#nav ul { padding:0px; margin:0px; }/* Who we are tier 2 */#nav ul ul { position:absolute; left:-999em; }#nav ul li:hover ul { left:0px; /* width:540px; SET WIDTH HERE TO SEE WHAT I WANT IT TO LOOK LIKE, EXCEPT I DON'T WANT A WIDTH SPECIFIED SO IT CAN BE ELASTIC */}/* Overview tier 3 */#nav ul ul ul { position:absolute; }#nav li { padding:0px; margin:0px; position:relative; }#nav ul li { float:left; display:block; }#nav ul ul li { position:relative; display:inline; }#nav ul ul ul li { clear:both; }#nav ul ul li.item-102 { width:100%; display:block; float:none; }/* Families */#nav a { display:block; }#nav ul li a { color:#ffffff; font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:24px; text-decoration:none; padding:0px; margin:0px 20px; }#nav ul ul li a {font-size:14px;background-image:url(../images/gray-transparent-bg.png);background-color:#848564; background-repeat:repeat;font-family:Arial, Helvetica, sans-serif;padding:3px 0px 0px 0px;margin:0px 5px;font-weight:bold;width:170px;height:17px;text-align:center;}#nav ul ul li a.feature {background-image:none;background-color:none;color:#000000;font-size:18px;padding:0px;margin:5px 0px 5px 0px;height:56px; width:100%; }#nav ul ul li a.feature .image-title { position:absolute; top:22px; padding-left:5px; }a.feature img { border:0px; }/* overview, etc. */#nav ul ul ul li a { background-image:none; background-color:none; text-align:left; color:#333333; font-weight:normal; padding:0px; margin:0px 5px; min-width:170px; width:100%; }#nav ul ul li a:hover { background-image:url(../images/menu-hover-bg.gif); color:#333333; background-position:left; background-repeat:repeat; }#nav ul ul ul ul li a { font-style:italic; min-width:155px; width:155px; }</style></head><body><div id="nav"><ul class="menu" id="families">    <li class="item-106 deeper parent"><a class="families" href="#1" >families</a>	 <ul>		 <li class="item-102"><a class="feature" href="http://localhost/#2" >Take a guided tour of the program</a></li>		    <li class="item-103 deeper parent"><a class="top" href="http://localhost/who" >Who we are</a>			 <ul>				 <li class="item-107"><a class="sub1" href="http://localhost/" >Overview</a></li>				    <li class="item-110"><a href="#p" >Philosophy</a></li>			    </ul>		    </li>		    <li class="item-104"><a class="top" href="http://localhost/serve" >Who we serve</a></li>		    <li class="item-105 deeper parent"><a class="top" href="http://localhost/expect" >What to expect</a>			    <ul>				    <li class="item-111"><a href="#c" >Cost</a></li>			    </ul>		    </li>	    </ul>    </li>    <li class="item-108 deeper parent"><a class="staff" href="#" >staff</a>	    <ul>		    <li class="item-112"><a href="#b" >Bios</a></li>	    </ul>    </li>    <li class="item-109"><a class="partners" href="#" >partners</a></li></ul></div></body></html>

Thanks!

  • Like 1
Link to comment
Share on other sites

This has nothing to do with your question but allow me to give you a piece of advice just for "correct" programming...its best to use separate .css files for your styling...that gives you mobility and you know where to find what...you only have to add a referrence for your .css at the head of your html and you are good to go :)

Link to comment
Share on other sites

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
 Share

×
×
  • Create New...