MyBB Community Forums

I'm pulling my teeth out here one by one.
I've been working on this since last night.

What I have going on is the jQuery Dropdown Nav from this thread:
http://community.mybb.com/thread-119435.html

I GIVE UP!
I have been customizing and working on it since damn near 12am last night. It's now 4:54pm.
No matter what I've tried, I just cannot get it centered. I solver all of my other problems. Which were it not fitting correctly if you minimized/panned your browser or are on a lower resolution display.

I did that with  min-width:1300px

But I for the life of me cannot get this thing centered, so it's in the same location on every single browser..
I am not a fan of CSS, it is my weakness. Please, I'm begging someone to help me out here.

You might find some uesless portions in here, when I said I've been trying everything I've really been trying everything.
I want the buttons to stay exactly the size they are as well as the text. But hell, if you can even implement my thead_bg into the buttons instead of a solid color, I would forever be in your debt for that as well, I tried already.
thead_bg: http://www.whiteyslair.com/images/MyRed/thead_bg.png
Index: http://www.whiteyslair.com

Please! Help me center this thing universally.
I will not be adding new buttons than what is already there, only more dropdown options.

CSS Section

/* remove the list style */
#menu {
	margin: auto;
	text-align: center;
}

#menu li {
	border: 3px solid #000;
    font-size:15px;
	font-family: 'Roboto Condensed', sans-serif;
  	border-radius: 5px;
    display:inline; 
    width:110px; 
      float:left; 
    background:#880303; 
    position:relative;
    z-index:500; 
    margin:0;
}

/* this is the parent menu */
#menu li a {
    display:block; 
    padding:8px 5px 0 5px; 
    font-weight:700;  
  font-size:15px;
    height:30px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#fff;
}

#menu li a:hover {
   background:#424242; 
    color:#fff;
}

/* submenu, it's hidden by default */
#menu ul {
    position:absolute; 
    left:0; 
  font-size:15px;
    display:none; 
    margin:0 0 0 -1px; 
    padding:0;
}

#menu ul li {
    width:110px; 
    font-size:15px;
	font-family: 'Roboto Condensed', sans-serif;
    float:left; 
  border-radius: 5px;
    border-top:2px solid #fff;
}

#menu ul a {
    display:block;  
    height:20px;
font-size:15px;
  	font-family: 'Roboto Condensed', sans-serif;
    padding: 8px 5px; 
    color:#fff;
}

#menu ul a:hover {
    text-decoration:underline;   
  	font-family: 'Roboto Condensed', sans-serif;
font-size:15px;
}

*html #menu ul {
    margin:0 0 0 -2px;
}

HTML in Header

<ul id="menu">
    <li><a href="http://www.whiteyslair.com"><img src="http://www.whiteyslair.com/images/icons/index.png"> Home</a></li>
    <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/lightbulb.png"> Community</a>
        <ul>
            <li><a href="http://www.whiteyslair.com/index.php">Forums</a></li>
            <li><a href="http://www.whiteyslair.com/search.php">Search</a></li>
            <li><a href="http://www.whiteyslair.com/memberlist.php">Member List</a></li>
          <li><a href="http://www.whiteyslair.com/calendar.php">Calendar</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/servers.png"> Servers</a>
    <ul>
        <li><a href="http://www.whiteyslair.com/portal.php?pages=servers">Server List</a></li>
        <li><a href="http://www.whiteyslair.com/showthread.php?tid=6">Ban Request</a></li>
        <li><a href="http://www.whiteyslair.com/showthread.php?tid=7">Ban Appeal</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
  <li><a href="http://www.whiteyslair.com/subscription.php"><img src="http://www.whiteyslair.com/images/icons/subscriptions.png"><font color="yellow"> Subscribe</font></a></li>
  <li><a href="#"><img src="http://www.whiteyslair.com/images/icons/servers.png"> Tokens</a>
    <ul>
        <li><a href="http://www.whiteyslair.com/newpoints.php">Information</a></li>
        <li><a href="http://www.whiteyslair.com/newpoints.php?action=stats">Statistics</a></li>
        <li><a href="http://www.whiteyslair.com/newpoints.php?action=donate">Donate</a></li>
      <li><a href="http://www.whiteyslair.com/newpoints.php?action=shop">Shop</a></li>
    </ul>            
<li><a href="#"><img src="http://www.whiteyslair.com/images/icons/support.png"> Support</a>
   <ul>
         <li><a href="http://www.whiteyslair.com/misc.php?action=help">Help Documents</a></li>
     <li><a href="http://www.whiteyslair.com/showteam.php">Staff List</a></li>
        <li><a href="http://www.whiteyslair.com/contact.php">Contact Us</a></li>
      </ul>
        <div class="clear"></div>
    </li>
            </ul> 

if I am not mistaken about your requirement, it is similar to the solution suggested for this
suggestion is to add a fixed width for the menu - eg. #menu {width: 62%;}

(2015-01-23, 02:05 AM).m. Wrote: [ -> ]if I am not mistaken about your requirement, it is similar to the solution suggested for this
suggestion is to add a fixed width for the menu - eg. #menu {width: 62%;}

This worked a bit - but then it broke the min-width of the site.

It's okay now, though -- I couldn't take it anymore. I had to find a different one.
Even ditched the icons, looks 10x better then the blobby large buttons.

^ well, I do prefer css menu than the js menu