javascript - How do I make jQuery dropdown menus drop straight down instead of off to the right? -

i have simple menu bar made jquery, , functions expected, submenus pop directly underneath main menu , not on right, shown in jsfiddle. know way can make happen? first time using jquery (and 1 of first times using javascript @ all), i'm little bit lost.

here css, believe may somehow problem, since list plain html.

#menu-bar{     height:30px;     width: 100%; }  #menu-bar > li{     float:left;     width:195px; } 

you can pass options, submenus should appear. this:

$( "#menu-bar" ).menu({ position: { my: "left top", at: "left bottom" } }); 

more on topic: http://api.jqueryui.com/menu/#option-position