CSS Horizontal menus

[escapedf]

Hi guys -
I have done a search through the threads - and using this one example which was an answer to another guys question::

http://www.beyondyourdreams.co.uk/CSSTEST2.htm

(view source has all the code)

Problem is - when you rollover magazine - the first list item (news)does not fall beneath it but it covers some of the word magazine

Any ideas?

Also, to put a black border around each word in the menu do you just use the border attribute in CSS?(so each word is in a block)

And if i had an image directly below the menu, how would one make the dropdownlist (news ect ) background transparent??,

Thanks! I looked at the suckerfish Tutorial but their example does not work in my browser!

I appreciate any quick tips & help!

[mcahill]

It's fine in FireFox. It's something to do with IE doubling pixel values in margins. Try adding this then playing with it until it works.

/* Hide from IE Mac \*/
* html li ul li {
margin-top: 4px;
margin-left: 4px;
}
/*end hide*/ 

What that does is it allows you to set the margins for IE alone. Of course, the mac version doesn't render the same, so we apply the backslash hack to keep IE Mac from seeing this.

[escapedf]

Ok, thanks!

Not quite sure what you mean by "playing with it till it works" -
what else do i need to do??

Hey if i knew i wouldnt be posting hehehe!

[mcahill]

Was in a rush yesterday...

I meant by changing the values for margin-left and margin-top until it lined up perfectly.

[Paul O'B]

For ie you just need to set the top position of the nested ukl correctly.

li ul { /* second-level lists */
 display: none;
 position: absolute;
 top: 100%;
 width: 5em;
 left: 0;
}

Heres a simple example with borders around that may help you to understand.

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

You will find it easier to make the drop downs uniform widths as above as it soon gets very difficult if you want differing widths for each menu item and for each drop down.

[escapedf]

yayay thanks paul a working example!
I will look at it tonite!

[escapedf]

Paul -
Quick one -

How do you move this menu a little bit to the right?

I see its in a Nav - but thats attached to the javascript?

dee

[escapedf]

Padding- left.. I got it!!!

[escapedf]

Talking to myself here!

Unfortunately padding - left moved the dropdown list items to the left to so now they are not lined up -

Any ideas thanks!

[Paul O'B]

HI,

Which bit do you want to move exactly?

The whole menu system or just the words inside the menu?

If its the whole menu system then you can moxe it using margin-left etc on the style for the ul. You can even absolutely position it wherever you want and it will still stay together. Its best to keep it in the flow though and just use margins to position it where it needs to be.

If you just want to move the text in the menu then you can use padding left in the anchor styles to move the text over (or use text-indent).