Jquery ui menubar new

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css">
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js"></script>
<nav>
	<ul id="bar1" class="menubar">
        <li>
			<a href="link2"> label2</a>
			<ul>
				<li>
					<a href="link2.1"> label2.1</a>
                    	<ul>
						<li>
							<a href="link1.1.1"> label1.1.1</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="link2.2"> label2.2</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#"> label1</a>
			<ul>
				<li>
					<a href="link1.1"> label1.1</a>
					<ul>
						<li>
							<a href="link1.1.1"> label1.1.1</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="link1.2"> label1.2</a>
				</li>
			</ul>
		</li>
		
	</ul>
</nav>

CSS

.ui-menu {
    width: 150px;
}

JavaScript

$(function () {
    $("#bar1").menubar();
});