CSS Trouble, Why does it move itself?

Question

Hello!

I am stuck on the CSS part, am helping a friend to implement one thing on her webpage. Its a dropdown menu and i got everything working the way i want it to. My problem is that it moves itself to the beginning of the row?

http://gazet.se/TestPages/Test.aspx

How do i get it to be centered?

(I have removed the code that has been solved to reduce the size)

Answer 1

The menu is floated block element, while the element around it are inline elements, which basicly can't mix. You need to either have all elements in #header_menu to also float, or let the menu be inline, too. (However I'm not sure, the latter would work).

Answer 2

The menu has an id called #jsddm

#jsddm {
float:left;
margin:0;
padding:0;
}

Remove float left - that is first step. Second thing you should put the menu all in one list with sublevels as nested lists and get rid of img separators - they can be added as background images trough css. I suggest you create a new structure for your menu. Heres a nice article explaining it http://www.alistapart.com/articles/dropdowns/

Basically all you have to do is add additional <li> elements to #jsdm and move all menu links inside it.