多级联动导航栏（top导航）-CSDN博客

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge.

Demo:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Important: Make sure your page contains a valid doctype for this menu to render properly.

HTML 5 advocates the use of the very simple doctype:<!DOCTYPE HTML>

The external files: The menu requires the following support files, which you should upload by default all to the same directory as your page itself:

jqueryslidemenu.css
jqueryslidemenu.js (inside this file, you should confirm the full URL to the 2 arrow images below)

If you wish to upload the above files to a different directory, be sure to edit "jqueryslidemenu.js" to update the URLs to the two arrow images used.

The CSS/ JavaScript: The below code should be added to the HEAD section of your page:

The HTML:

<div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div>

转载于:https://www.cnblogs.com/mmcmmc/p/3883556.html