music_lp90 Posted January 3, 2012 Share Posted January 3, 2012 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! Link to comment Share on other sites More sharing options...
Apsixos Posted January 3, 2012 Share Posted January 3, 2012 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 More sharing options...
music_lp90 Posted January 4, 2012 Author Share Posted January 4, 2012 Thanks, Apsixos, I am aware of that. I was just using this as a test doc before applying the css to the site I'm developing and found it easier to write up a single doc quickly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.