[SOLVED] how to put jquery ui menubar items to single row

how to put jquery ui menubar items to single row

jquery ui menubar is added to application. Every menu item starts at next row and bullet in IE9 appears in first column:

enter image description here

In firefox bullet appears before every menu item.

How to force all menubar items in same row ?

Page source is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" /> 
 <link href="../../Content/Css/Site.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/Scripts/jquery/jquery-1.8.3.js"></script>
<script src="/Scripts/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="/Scripts/menubar.js"></script>
<script type="text/javascript">
$(function () {
            $("#bar1").menubar({
            autoExpand: true,
                select: function (event, ui) {
                    if (ui.item.context.href == null) {
                        // Enter is pressed
                        location.href = ui.item[0].firstChild.href;
                        return;
                    }
                    location.href = ui.item.context.href;
                }
            });
            $('#bar1').css('display', 'block');
        });
    </script>
</head>
<body>
    <div id="container">
    <ul id="bar1">
    <li><a href="#About">About</a></li>
    <li>
        <a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a></li>
            <li class="ui-state-disabled"><a href="#">Open recent...</a></li>
            <li><a href="#Save">Save</a></li>
            <li><a href="#Save%20as...">Save as...</a></li>
            <li><a href="#Close">Close</a></li>
            <li><a href="#Quit">Quit</a></li>
        </ul>
    </li>
    <li>
        <a href="#Edit">Edit</a>
        <ul>
            <li><a href="#Copy">Copy</a></li>
            <li><a href="#Cut">Cut</a></li>
            <li class="ui-state-disabled"><a href="#">Paste</a></li>
        </ul>
    </li>
    <li>
        <a href="#View">View</a>
        <ul>
            <li><a href="#Fullscreen">Fullscreen</a></li>
            <li><a href="#Fit%20into%20view">Fit into view</a></li>
            <li>
                <a href="#Encoding">Encoding</a>
                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a></li>
                    <li><a href="#UTF-8">UTF-8</a></li>
                    <li>
                      <a href="#UTF-16">UTF-16</a>
                      <ul>
                         <li><a href="#Option%201">Option 1</a></li>
                         <li><a href="#Option%202">Option 2</a></li>
                         <li><a href="#Option%203">Option 3</a></li>
                         <li><a href="#Option%204">Option 4</a></li>
                      </ul>
                   </li>
                </ul>
            </li>
            <li><a href="#Customize...">Customize...</a></li>
        </ul>
    </li>
        </ul>

Solution