JavaScript multi-level drop-down menu code (simple and practical)

JavaScript multi-level drop-down menu code (simple and practical)_navigation menu

WBOY

Release： 2016-05-16 18:24:16

Original

1278 people have browsed it

<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">
</a>Column 1<ul>
<li>
<a href="#"></a>Column 1->Menu 1</li>
<li>
<a href="#"></a>Column 1->Menu 2</li>
<li>
<a href="#"></a>Column 1->Menu 3</li>
<li>
<a href="#"></a>Column 1->Menu 4</li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">
</a>Column 2<ul>
<li>
<a href="#"></a>Column 2->Menu 1</li>
<li>
<a href="#"></a>Column 2->Menu 2</li>
<li>
<a href="#"></a>Column 2->Menu 3</li>
<li>
<a href="#"></a>Column 2->Menu 4</li>
<li>
<a href="#"></a>Column 2->Menu 5</li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">
</a>Column 3<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">
</a>Column 3->Menu 1<ul>
<li>
<a href="#"></a>Menu 1->Submenu 1</li>
<li>
<a href="#"></a>Menu 1->Submenu 2</li>
<li>
<a href="#"></a>Menu 1->Submenu 3</li>
<li>
<a href="#"></a>Menu 1->Submenu 4</li>
</ul>
</li>
<li>
<a href="#"></a>Column 3->Menu 2</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">
</a>Column 3->Menu 3<ul>
<li>
<a href="#"></a>Menu 3->Submenu 1</li>
<li>
<a href="#"></a>Menu 3->Submenu 2</li>
<li>
<a href="#"></a>Menu 3->Submenu 3</li>
</ul>
</li>
</ul>
</li>
</ul>