CSS Trouble, Why does it move itself?

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)

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.

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).