Jump to content

Centering suckerfish drop-down menu


Recommended Posts

I've been having some difficulty getting this suckerfish drop-down menu to align its links to the center of the webpage. The container it is held within spans across the viewer's window which is fine. It's the links themselves I am trying to center and they are refusing to align correctly. Here's the CSS and the HTML to go with it at the moment: CSS:

#topbar-container{position: absolute;left: 0px;margin: 0%;font-size: 12px;	width:100%;	text-align: left;	white-space:nowrap;	padding: 2px 4px 2px 4px; /* This changes the padding on the top topbar options. Goes T, R, B then Left. */}  #topbar a:visited, #topbar color: #f5f5f5;text-decoration:none;}  #topbar color: #f5f5f5;	text-decoration:none;}     #topbar ul	{	margin:0;	position:relative;	vertical-align: bottom;			} #topbar ul ul	{	z-index:500;	display:none;	margin:-1em 0 0 -1em;	} #topbar ul ul ul	{	left:100%;	} div#topbar cursor:pointer;	li:hover ul ul,div#topbar li li:hover ul ul,div#topbar li li li display:none;} div#topbar li:hover ul,div#topbar li li li:hover ul{display:block;}


<div id="topbar-container"><div id="topbar">	{$welcomeblock}<ul>		<li><a href="#">Forum Tools</a>			<ul>				<li><a href=http://sizaelrpg.com/mybb"/search.php">Search</a></li>				<li><a href="http://sizaelrpg.com/mybb/search.php?action=getnew">Newest Posts</a></li>				<li><a href="http://sizaelrpg.com/mybb/search.php?action=getdaily">Today's Posts</a></li>				<li><a href="http://sizaelrpg.com/mybb/memberlist.php">Member List</a></li>				<li><a href="http://sizaelrpg.com/mybb/calendar.php">Calendar</a></li>			</ul>		  </li>	  </ul><!-- NEXT TOPBAR DROP-DOWN /--><ul>				<li><a href="#"><img src="http://i6.photobucket.com/albums/y244/j9wolf/COTSkin1/topbar_dragon2.png" title="Get Started!" alt="Get Started!" width="36"></a>			<ul>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-3.html>Newcomer's Guide</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-2974.html>Playable Races</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-2977.html>Classes & Specialisations</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-419.html>Cannon: Templars</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-158.html>Cannon: Mages</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-2954.html>Account Types</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-418.html>Guide: Profile Creation</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-1793.html>FAQs</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/forum-191.html>MyBB Help</a></li>			</ul>		 </li>	   </ul><!-- NEXT TOPBAR DROP-DOWN /-->	  <ul>				<li><a href="#">Basics</a>			<ul>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-417.html>Rules</a></li				<li><a href=http://chroniclesofthedas.ashkir.com/thread-1254.html>Setting Overview</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/forum-89.html>Must Reads</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-292.html>Face Claims</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-4550-post-46559.html>Meet the Staff</a></li>			</ul>		 </li>	   </ul><!-- NEXT TOPBAR DROP-DOWN /-->	  <ul>				<li><a href="#">World Info</a>			<ul>				<li><a href=http://chroniclesofthedas.ashkir.com/forum-38.html>The World</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-3311-post-41592.html>Lore Index</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-216.html>Canon Info</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-4-post-6136.html>Races</a></li>				<li><a href="http://chronicles-of-thedas.deviantart.com/gallery/32325334" target="_blank">Maps of Thedas</a></li>			 </ul>		 </li>	   </ul><!-- NEXT TOPBAR DROP-DOWN /-->	  <ul>				<li><a href="#">Get Involved!</a>			<ul>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-379-post-1706.html>Player Roster</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-1207-post-8512.html>Faction Roster</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-6-post-15.html>Months & Annums Coding</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-3005-post-34706.html>Individual Writing</a></li>				<li><a href=http://chroniclesofthedas.ashkir.com/thread-108.html>Profile Management</a></li>			 </ul>		 </li>	   </ul></ul><!-- TOPBAR CLOSER - PAIRS WITH THE FIRST UL AFTER TH WELCOME BLOCK. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR. DON'T REMOVE. /--></div><!-- CLOSES TOPBAR CONTAINER. DON'T REMOVE. /-->

Any help would be greatly appreciated! I'm doing this for some friends and I always seem to have trouble with drop-down menus lol!

Link to comment
Share on other sites

i have a similiar dropdown menu with css:

#menu {    list-style:none;    width:1160px;    margin:0px auto 0px auto;    height:43px;    padding:0px 20px 0px 20px;}dropdown_2columns{margin:4px auto;    float:left;    position:absolute;    left:-999em; /* Hides the drop down */    text-align:left;    padding:10px 5px 10px 5px;    border:1px solid #777777;    border-top:none;}

<ul id="menu">   	 <li><a href="#" class="drop">Corporative</a><!-- menu starts-->   	    <div class="dropdown_2columns"><!-- starts 2 column container --> 

Have you change the position value?

Link to comment
Share on other sites

Your html, AND your css need to be validated, especially the css, you have missing/misplace closing and opening curly brackets, and until these are sorted out, any solution given would not work anyway.
Thanks, but this is only part of a template and CSS for a MyBB skin I'm working on, so the dividers and such are actually found further down in the template - I'm just concentrating the coding sections given for the menu. Edited by Drae
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

  • Create New...