Jump to content

Suckerfish Drop-Down Menus


Recommended Posts

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?

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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;}

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...