Need Help Modifiying All Levels Menu

[Da-Vinci]

1) Script Title: DD Levels Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem:

Basically I've been playing around with this menu for days but I'm very new to CSS, basically what I'm trying to achieve is an Icon Navbar for my vBulletin forum. Because the Javascript in vBulletin doesn't support multi level menus, I've been trying to use the All Levels Menu from DD.

This is how I'd like the menu to look.



And here's how it looks in Firefox, Opera & IE.



And here's how it looks in Chrome & Safari



The dropdown part works perfectly, although I've only added it to one category at the minute for testing purposes.

Does anybody know how to center the UL in Chrome & Safari?



And also how would I make the icons spread over 100% width with even spacing, like in the first image?

Here is the CSS I've edited in the ddlevelsmenu-topbar.css file.

/* ######### Matt Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: {vb:stylevar body_background};
overflow: hidden;
margin-left: 10%;
margin-right: 10%;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
float: left;
text-decoration: none;
margin: 0;
padding: 0px 10px; /*padding inside each tab*/
color: {vb:stylevar body_color};
background: {vb:stylevar body_background};
}

.mattblackmenu li a:visited{
color: {vb:stylevar body_color};
}

.mattblackmenu li a:hover{
text-decoration:underline; /*links status of tabs for hover state */
}

.mattblackmenu a.selected{
background: {vb:stylevar body_color}; /*background of tab with "selected" class assigned to its LI */
}

And here is my HTML code.

<div id="ddtopmenubar" class="mattblackmenu" align="center">
<ul>
<li><a href="forum.php"><img src="images/misc/home.png"><p>Home</p></a></li>
<li><a href="forumdisplay.php?f=68" rel="ddsubmenu1"><img src="images/misc/vip.png"><p>VIP</p></a></li>
<li><a href="forumdisplay.php?f=53" rel="ddsubmenu2"><img src="images/misc/mp3.png"><p>Music</p></a></li>
<li><a href="forumdisplay.php?f=54" rel="ddsubmenu3"><img src="images/misc/movies.png"><p>Movies</p></a></li>
<li><a href="forumdisplay.php?f=148" rel="ddsubmenu4"><img src="images/misc/mic.png"><p>Karaoke</p></a></li>
<li><a href="forumdisplay.php?f=132" rel="ddsubmenu5"><img src="images/misc/euro.png"><p>Euro Zone</p></a></li>
<li><a href="forumdisplay.php?f=36" rel="ddsubmenu6"><img src="images/misc/tv.png"><p>Television</p></a></li>
<li><a href="forumdisplay.php?f=2" rel="ddsubmenu7"><img src="images/misc/console.png"><p>Consoles</p></a></li>
<li><a href="forumdisplay.php?f=124" rel="ddsubmenu8"><img src="images/misc/ebook.png"><p>Books</p></a></li>
<li><a href="forumdisplay.php?f=207" rel="ddsubmenu9"><img src="images/misc/mobile.png"><p>Mobile</p></a></li>
<li><a href="forumdisplay.php?f=204" rel="ddsubmenu10"><img src="images/misc/apple.png"><p>Apple</p></a></li>
<li><a href="forumdisplay.php?f=55" rel="ddsubmenu11"><img src="images/misc/pc.png"><p>PC Apps</p></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>

<!--VIP Down Menu-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="forumdisplay.php?f=69">VIP Lounge</a>
 <ul>
 <li><a href="forumdisplay.php?f=71">General Chat</a>
 <li><a href="forumdisplay.php?f=72">Upload Requests</a></li>
 <li><a href="forumdisplay.php?f=70">Suggestions for VIP Section</a></li>
 <li><a href="forumdisplay.php?f=153">The Dumping Ground</a></li>
 </ul>
</li>
<li><a href="forumdisplay.php?f=73">Console Help</a>
 <ul>
 <li><a href="forumdisplay.php?f=74">XBOX</a>
 <li><a href="forumdisplay.php?f=75">XBOX 360</a></li>
 <li><a href="forumdisplay.php?f=79">Gamecube</a></li>
 <li><a href="forumdisplay.php?f=76">DS & DSi</a></li>
 <li><a href="forumdisplay.php?f=77">Wii</a>
 <li><a href="forumdisplay.php?f=78">Playstation</a></li>
 <li><a href="forumdisplay.php?f=80">Playstation 2</a></li>
 <li><a href="forumdisplay.php?f=81">Playstation 3</a></li>
 <li><a href="forumdisplay.php?f=82">PSP</a></li>
 </ul>
</li>
<li><a href="forumdisplay.php?f=83">PC Help</a>
 <ul>
 <li><a href="forumdisplay.php?f=84">Hardware</a>
 <li><a href="forumdisplay.php?f=86">Recovery</a></li>
 <li><a href="forumdisplay.php?f=85">Security</a></li>
 <li><a href="forumdisplay.php?f=109">Disc Burning</a></li>
 <li><a href="forumdisplay.php?f=87">Tutorials</a>
 <li><a href="forumdisplay.php?f=110">AIO (All in One) Apps</a></li>
 </ul>
</li>
<li><a href="forumdisplay.php?f=88">Alternative Downloads</a>
 <ul>
 <li><a href="forumdisplay.php?f=89">Direct Links</a>
 <ul>
  <li><a href="forumdisplay.php?f=89">Music</a>
  <li><a href="forumdisplay.php?f=127">PC Games</a></li>
  <li><a href="forumdisplay.php?f=92">Movies</a></li>
  <li><a href="forumdisplay.php?f=93">TV</a></li>
  <li><a href="forumdisplay.php?f=94">Console</a></li>
  <li><a href="forumdisplay.php?f=101">PC</a></li>
  <li><a href="forumdisplay.php?f=178">18+</a></li>
  <li><a href="forumdisplay.php?f=212">Ebooks</a></li>
  <li><a href="forumdisplay.php?f=213">Music Videos</a></li>
  </ul>
 </li>
 </ul>
</li>
<li><a href="forumdisplay.php?f=167">Streaming Links</a>
 <ul>
  <li><a href="forumdisplay.php?f=169">Movies</a></li>
  <li><a href="forumdisplay.php?f=168">Sports</a></li>
  <li><a href="forumdisplay.php?f=170">TV</a></li>
  <li><a href="forumdisplay.php?f=171">Misc</a></li>
  <li><a href="forumdisplay.php?f=201">Comedy</a></li>
  <li><a href="forumdisplay.php?f=202">Music</a></li>
</ul>
</li>
<li><a href="forumdisplay.php?f=111">Movie Samples</a></li>
<li><a href="forumdisplay.php?f=112">Mobile Phone</a>
 <ul>
 <li><a href="forumdisplay.php?f=67">iPhone</a></li>
 </ul>
 </li>
</ul>

[ddadmin]

Currently your top UL is styled using CSS's float property (the individual A elements that is). That makes it hard to center the menu:

.mattblackmenu li a{
float: left;
text-decoration: none;
margin: 0;
padding: 0px 10px; /*padding inside each tab*/
color: {vb:stylevar body_color};
background: {vb:stylevar body_background};
}

You might want to instead start with a CSS menu that doesn't use this property, such as Chrome Menu on the All Levels Menu Generator page. Once you have the base CSS set up, then go about changing it to show icons instead.

An alternative approach is to go with Flex Level Menu instead, which lets you add a multi level drop down menu to arbitrary links on your page. That way you can just manually define your icons as individual elements, then assign a drop down menu to each of them.

[Da-Vinci]

Thanks very much, the Flex Level Menu worked a treat.