All Levels menu alignment

1) Script Title:
All Levels Navigational Menu (v1.31)

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

3) Describe problem:
on the horizontal version of this menu, the default position of the menu items are aligned to the left of the menu bar. how can i align them to the centre?

Code:

---


.mattblackmenu li a{
position:relative;
top:0px;
left:32%;
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}

---

just added the code. it works great.

thanks.

glad i could help

just done some more testing, and found out that this doesn't actually work, it just moves the start of the menus to 1/3 of the way across the screen, but doesn't actually centre them. do you have any other suggestions?

To actually center the top level menu, you'll need to modify the CSS for it so it doesn't use "float: left", which makes centering difficult. This changes the look of the menu obviously, so do so based on your knowledge of CSS. Here's one such CSS you can replace the entire contents of ddlevelsmenu-topbar.css with which creates a menu bar that can easily be centered:

Code:

---

/* ######### Chrome Main Menu Bar CSS ######### */

.chromemenu{
width: 99%;
font-weight: bold;
font-size: 90%;
}

.chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x;
padding: 7px 0;
margin: 0;
text-align: center; /*set value to "right" for example to align menu to the left of page*/
}

.chromemenu ul li{
display: inline;
}

.chromemenu ul li a{
color: #494949;
padding: 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromemenu ul li a:hover{
background: url(chromebg2.gif) center center repeat-x;
}

.chromemenu ul li a.selected{
background: url(chromebg2.gif) center center repeat-x;
}

---

Be sure to change the CSS class name of the menu in your HTML from class="mattblackmenu" to class="chromemenu". Images referenced in the CSS code above can be grabbed here: http://www.dynamicdrive.com/style/cs...rome-menu-bar/