HTML- simple css question

[Kerwin]

Hi;

I've got a horizontal two-level menu, where level 2 is shown by mouseover on a level 1-element.
Code here:http://melistra.com/test/menu.html
http://melistra.com/test/style.css
I want level 2 to always start to the left (as it now does on "produkter", but not on "om oss").
How can this be done?

[Shell]

Before doing anything about second level, please fix up the basics:

<http://dorayme.890m.com/alt/justPics/pixelfonts.png>

Do not use px for font-sizes in general.

[Baser-X]

Yes. Don't top post.

Secondly, get rid of all the other "pixel perfect" dimensions in there.

In fact get rid of ALL the dimensions. Let the browser size things according
to your content.

With my font size (that I choose) your dropdown menu overlaps the top menu.
Badly.

As to your original question this dropdown menu is *deigned* so that the
dropdown is directly under the dropper. That is why the dropdown is a child
of the dropper. If you want something different you will have to use a
different approach entirely. For a start remove position: relative from
#menu ul li, so the dropdowns now position relative to the next higher
containing block. Probably enclose the top level menu in a containing block
so the dropdowns are relative to that and not to the body. That should get
you started.

Search the archives for this group. Dropdown menus are discussed so many
bloody times it should be an FAQ.

[Shell]

Have you actually upped the text size to see what happens to your menu
still?

Do not use px to size elements if fonts will quickly spill out of them
when a user makes the text size. Be careful of using units with
line-height, (you use px).

I tell you these things not to be awkward but because they are
particularly important for drop down menus
where space is at a premium.

And please don't top post.

Your "top: 20px" is too small, try 1.5em

If you want all the second levels to start at far left you will lose
simplicity and generality. One thing is possible but I have not studied
your code in detail is this, class the second level sub ul for the
second top item. Eg:


<ul class="secondItemSubs">
<li><a href="page4.html" title="">Strategi</a></li>
etc

and since you know the approx em width of the first top item,
"PRODUKTER", you might be happy to add:

ul.secondItemSubs li {left:-6em;}

to your CSS.

[Baser-X]

In fact look at
<http://www.htmldog.com/articles/suckerfish/dropdowns/>

where there is provision for IE6