jquery ui menubar is added to application. Every menu item starts at next row

Question

0

Asked: June 15, 20262026-06-15T18:43:38+00:00 2026-06-15T18:43:38+00:00

jquery ui menubar is added to application. Every menu item starts at next row

0

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>