Jsfiddle online test Html, CSS, JavaScript -- http://jsfiddle.net /,

Jsfiddle online test Html, CSS, JavaScript -- http://jsfiddle.net /,

Jsfiddle tests Html, CSS, and JavaScript online and displays the test results.

1. Select jQuery1.9.1.

2. Select jQuery UI 1.9.2.

3. Html

<Ul id = "nav">
<Li> <a href = "#"> Item 1 </a> </li>
<Li> <a href = "#"> Item 2 </a> </li>
<Li> <a href = "#"> Item 3 </a>
<Ul>
<Li> <a href = "#"> Item 3-1 </a>
<Ul>
<Li> <a href = "#"> Item 3-11 </a> </li>
<Li> <a href = "#"> Item 3-12 </a> </li>
<Li> <a href = "#"> Item 3-13 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Item 3-2 </a> </li>
<Li> <a href = "#"> Item 3-3 </a> </li>
<Li> <a href = "#"> Item 3-4 </a> </li>
<Li> <a href = "#"> Item 3-5 </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Item 4 </a> </li>
<Li> <a href = "#"> Item 5 </a> </li>
</Ul>

4. CSS

. Ui-menu {list-style: none; padding: 2px; margin: 0; display: block; outline: none ;}
. Ui-menu. ui-menu {margin-top:-3px; position: absolute ;}
. Ui-menu. ui-menu-item {
Display: inline-block;
Float: left;
Margin: 0;
Padding: 0;
Width: auto;
}
. Ui-menu. ui-menu-divider {margin: 5px-2px 5px-2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0 ;}
. Ui-menu. ui-menu-item a {text-decoration: none; display: block; padding: 2px. 4em; line-height: 1.5; zoom: 1; font-weight: normal ;}
. Ui-menu. ui-menu-item a. ui-state-focus,
. Ui-menu. ui-menu-item a. ui-state-active {font-weight: normal; margin:-1px ;}
. Ui-menu. ui-state-disabled {font-weight: normal; margin:. 4em 0. 2em; line-height: 1.5 ;}
. Ui-menu. ui-state-disabled a {cursor: default ;}
. Ui-menu: after {
Content :".";
Display: block;
Clear: both;
Visibility: hidden;
Line-height: 0;
Height: 0;
}

5. JavaScript

$ ("# Nav"). menu ({position: {at: "left bottom "}});

6. Click "Run" in the upper left corner"