Need some help with this menu

HTML & CSS
1

Hi I have this menu at http://bit.ly/9A5hi9

The submenu is only positioned correctly on Firefox, its mispositioned on Chrome and IE, how can I fix that?

Also I would like to align the whole menu to the centre of the page but haven’t managed that either.

Any help appreciated, thanks.

2

Just add some padding top to the element to start with and then just show the background image on hover. Don’t try to increase the height on hover as the menu will jump around.

3

ok thanks alot, last thing i wanted to do is to add a background image to the main menu items on hover, basically an icon that appears above the menu, but I am not managing to make the main menu items higher than they are without breaking the whole thing.

4

thanks, how would i center the whole menu then?

5

Hi,

That’s some invalid code you’ve got there :slight_smile:

It looks like yo copied Stu Nichols menu but forgot all the conditional comments to hide the bad bits from the validator and from good browsers.

You van make it work with this:


.navigation-headings ul table{position:absolute;left:0}

However you really should clean that up and insert the conditional comments as you have nested anchors holding other nested anchors at the moment which is not good.

I prefer the suckerfish menu with the short snippet of js for ie6 as the code is so much easier and more compact.

6

The easiest way is to work out the width and then just give it auto margins.

e.g.


.navigation-headings ul {
height:25px;
list-style-type:none;
[B]margin:0 auto;[/B]
padding:0;
[B]width:920px;[/B]


}

Otherwise if you need a fluid width you’d need to do the same as I said for the submenu and use the inline-block method. (back tomorrow - I need some sleep.)

7

no im actually talking about the whole menu, so the main menu centred on the page, not the submenu

8

If you are talking about the submenu then you would need to remove the floats from the submenu and set the list to display:inline and the anchors to display:inline-block and then put text-align:center on the parent ul.

Very roughly like this:


[B].navigation-headings ul  ul{text-align:center;}[/B]
.navigation-headings ul :hover ul li {
[B]    display:inline;[/B]
    border-left:30px;
    background:#FFFFFF;
[B]    line-height: 40px;
    float:none;[/B]
}
/* Text for the dropdown submenu */
.navigation-headings ul :hover ul li a {
  [B]  display:inline-block;
    float:none;[/B]
    font-size: 16px;
    Text-decoration: none;
    line-height:40px;
    color:#444;
    padding:0 20px;
}