Suckerfish Drop-Down Menus

[Drae]

I'm working on a drop-down menu for someone and it's the largest one I've had to do yet (drop-downs are not a strong point of mine, and the largest I've ever had to do only had the one layer of drop-downs). This particular menu I want to have centered, along with it's drop-downs, and I was advised to code the first set of uls like this:

Set the root ul css to position: relative; left: 50%; float: left; Or you can use display: table; margin: 0 auto;

This is the HTML for the menu:

<ul class="topbar">						<li><a href="">News</a></li>													   <ul><li><a href="">Blog</a></li>																 <li><a href="">Podcasts</a></li>													   </ul><!-- CLOSES NEWS SUB-SECTION -->					   <li><a href="">About</a></li>													  <ul><li><a href="">Story</a></li>																<li><a href="">Staff</a></li>													  </ul><!-- CLOSES ABOUT SUB-SECTION -->						<li><a href="">Rules</a></li>					   <li><a href="">World Lore</a></li>													   <ul><li><a href="">Races</a></li>																								 <ul><li><a href="">The Sidhe - Society</a></li>																																		 <ul><li><a href="">Sidhe Naming Conventions & Languages</li>																																				  <li><a href="">Sidehe Anatomy</a></li>																																				  <li><a href="">Courts of the Sidhe</a></li>																																				  <li><a href="">Clans of the Sidhe</a></li>																																				  <li><a href="">The Danuist Religion</a></li>																																				 <li><a href="">Criminal Orders of Cels</a></li>																																		   </ul><!-- CLOSES SIDEHE SOCIETY SUB-SECTION -->																										  <li><a href="">The Aesir - Society</a></li>																																		  <ul><li><a href="">Aesir Naming Conventions & Languages</a></li>																																					<li><a href="">Aesir Anatomy</a></li>																																					<li><a href="">Brotherhoods of Norland</a></li>																																					<li><a href="">The Faith of Norland</a></li>																																					<li><a href="">Dishonoured Folk</a></li>																																		 </ul><!-- CLOSES AESIR SOCIETY SUB-SECTION -->																								  </ul><!-- CLOSES RACES SUB-SECTION -->															   <li><a href="">History</a></li>																							  <ul><li><a href="">Historical Lands & People</a></li>																							  </ul>															   <li><a href="">Magic</a></li>																							  <ul><li><a href="">Draiocht: Magic of the Sidhe<a></li>																										<li><a href="">Seird: Magic of the Aesir</a></li>																							 </ul><!-- CLOSES MAGIC SUB-SECTION -->															   <li><a href="">Warfare & Technology</a></li>															  <li><a href="">Lands & Nations</a></li>																							 <ul><li><a href="">Calendars & Dating</a></li>																									  <li><a href="">Cultural Interaction</a></li>																							  </ul><!-- CLOSES LANDS AND NATIONS SUB-SECTION -->					   <li><a href="">Forum</a></li>													  <ul><li><a href="">Search</a></li>																<li><a href="">Members</a></li>																<li><a href="">Calendar</a></li>																<li><a href="">MyBB Help</a></li>													 </ul><!-- CLOSES FORUM SUB-SECTION -->					   <li><a href="">Character Creation!</a></li>					   <li><a href="">Guides</a></li>													   <ul><li><a href"">Guide to Account Switching</a></li>																 <li><a href="">Character Faults</a></li>																 <li><a href="">Guild Wars 2 Guidebook</a></li>																								<ul><li><a href="">Who is Your Character</a></li>																																		 <ul><li><a href="">Playing a Good-aligned Character</a></li>																																				   <li><a href="">How to Avoid Purple Person Syndrome</a></li>																																				   <li><a href="">Playing a Evil-aligned Character</a></li>																																		  </ul><!-- CLOSES WHO IS YOUR CHARACTER SUB-SECTION -->																										  <li><a href="">Races of Tyria</a></li>																																		 <ul><li><a href="">Charr</a></li>																																												 <ul><li><a href="">Charr Naming Conventions</a></li>																																												</ul><!-- CLOSES  CHARR NAMING CONVENTIONS -->																																		 </ul><!-- CLOSES CHARR SUB-SECTION -->																																				   <li><a href="">Humans</a></li>																																												  <ul><li><a href="">Human Naming Conventions</a></li>																																															<li><a href="">Personality</a></li>																																															<li><a href="">Continental Tyrian History</a></li>																																															<li><a href="">Elonian History</a></li>																																															<li><a href="">Canthan History</a></li>																																															<li><a href="">Human Ethnicity & Social Class</a></li>																																												   </ul><!-- CLOSES HUMAN SUB-SECTION -->																																				   <li><a href="">Norm</a></li>																																												   <ul><li><a href="">Norm Naming Conventions</a></li>																																												   </ul><!-- CLOSES NORM NAMING CONVENTIONS -->																																				   <li><a href="">Sylvari</a></li>																																												 <ul><li><a href="">Sylvari Naming Conventions</a></li>																																												 </ul> <!-- CLOSES SYVARI NAMING CONVENTIONS -->																																				   <li><a href="">Asura</a></li>																																												 <ul><li><a href="">Asura Naming Conventions</a></li>																																												 </ul><!-- CLOSES ASURA NAMING -->																																				   <li><a href="">Other Sources for Racial Names</a></li>																																				  <li><a href="">Racial Abilities & Magic</a></li>																																		 </ul><!-- CLOSES RACES OF TYRIA -->																										  <li><a href="">Professions & Magic</a></li>																																		<ul><li><a href="">Warrior (Scholar)</a></li>																																				 <li><a href="">Guardian (Soldier)</a></li>																																				 <li><a href="">Engineer (Adventurer)</a></li>																																				 <li><a href="">Ranger (Adventurer)</a></li>																																				 <li><a href="">Thief (Adventurer)</a></li>																																				 <li><a href="">Elementalist (Scholar)</a></li>																																				 <li><a href="">Necromancer (Scholar)</a></li>																																				  <li><a href="">Mesmer (Scholar)</a></li>																																		</ul><!-- CLOSES PROFESSIONS & MAGIC SUB-SECTION -->																							   </ul><!-- CLOSES GUILD WAR 2 GUIDE SUB-SECTION -->													   </ul>					  <li><a href="">Contact</a></li></ul><!-- CLOSES TOPBAR -->

(Apologies if the spacing doesn't look as it should on here.) Do I need to define styling for all the ul sets, or will just using the .topbar ul suffice?

[newseed]

The class .topbar should be enough to style your parent and any child elements. To style parent links, just do this: .topbar {your styles here} To style 2nd level:.topbar ul {your styles here} 3rd level.topbar ul ul {your styles here} ...and so forth. So if you want to change the color of the links for the 3rd level then it would look something like this: .topbar ul ul a {color:red;} Now I reviewed your HTML and the sub list are done incorrectly. You are opening a list and the closing it before you adding your sub-list. Red indicates wrong placement and green show correct placement. <ul class="topbar"> <li><a href="">News</a> </li> <ul> <li><a href="">Blog</a></li> <li><a href="">Podcasts</a></li> </ul></li> <!-- CLOSES NEWS SUB-SECTION -->When you want to create sub menus then you open a <li> and then all <ul><li></li></ul> and the close it </li> . You do that for each and ever level. I strongly urge you look at Superfish examples to see how it's done.

[Drae]

Thanks!

 

To position the drop-downs so they display correctly underneath their parent ul, keeping in mind I'm trying to centre the menu, what would be the best way to code it's positioning?

[Drae]

Just double-checked my reference book and w3school's way of dealing with lis, and it closes them like I did in my snippet above?

 

Something's not quite working either way.

 

What's the correct way to hide the drop-down options that shouldn't display until their parent class is hovered over?

 

This is the coding at present:

 

#topbar-container {        background: #dbd2b3;        border-bottom: 1px solid #67624c;        color: #67624c;        line-height: 48px;        font-size: 16px;        height: 48px;        margin-top: 0px;        margin-left: auto;        margin-right: auto;        text-align: center;        text-transform: lowercase;        font-weight: bold;        list-style-type: none;}#topbar-container a {       color: #67624c;       padding-left: 3px;       padding-right: 3px;       display: inline;}#topbar-container a:hover {      color: #fff;      text-decoration: none;}.topbar {	float: left;        background: #dbd2b3;        border-bottom: 1px solid #67624c;        color: #67624c;        line-height: 48px;        font-size: 16px;        height: 48px;        margin-top: 0px;        margin-left: auto;        margin-right: auto;        text-align: center;        text-transform: lowercase;        font-weight: bold;        list-style-type: none;}.topbar a {       color: #67624c;}.topbar a:hover {      color: #fff;      text-decoration: none;}.topbar ul {	float: left;        color: #67624c;        padding-left: 3px;        padding-right: 3px;        display: inline;        background:#dbd2b3;        border-bottom: 0px;        display: span;        list-style-type: none;        width: auto;}.topbar ul ul {	float: left;        color: #67624c;        padding-left: 3px;        padding-right: 3px;        display: inline;        background:#dbd2b3;        border-bottom: 0px;        display: span;        list-style-type: none;        width: 220px;}.topbar ul ul ul {	float: left;        color: #67624c;        padding-left: 3px;        padding-right: 3px;        display: inline;        background:#dbd2b3;        border-bottom: 0px;        display: span;        list-style-type: none;        width: 220px;}.topbar ul ul ul ul {        float: left;        color: #67624c;        padding-left: 3px;        padding-right: 3px;        display: inline;        background:#dbd2b3;        border-bottom: 0px;        display: span;        list-style-type: none;        width: 220px;}.topbar ul ul ul ul ul {        float: left;        color: #67624c;        padding-left: 3px;        padding-right: 3px;        display: inline;        background:#dbd2b3;        border-bottom: 0px;        display: span;	        list-style-type: none;        width: 220px;}