Home>

This is a two-level drop-down menu.jquery plugin version, runs well under ie6/ie7/ie8,In this example,The menu shows only four groups,But the principle is the same,If the menu is long, just copy one of them.Until your application is satisfied.

The online demo address is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Two-level drop-down menu</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
* {margin:0px;padding:0px;list-style:none;}
body {font-size:12px;}
.nav {float:left;clear:both;margin:100px;display:inline;}
.nav li {float:left;position:relative;}
.nav li a {display:block;width:60px;padding:8px 0px 6px;text-align:center;color:#000;background:#ccc;text-decoration:none;}
.nav li a:hover {background:#666;color:#fff;}
.nav li ul {position:absolute;display:none;}
.nav li ul li {float:none;}
.nav li ul li a {background:#eee;}
</style>
</head>
<body>
<ul>
<li><a href="javascript:void (0);">Home</a></li>
<li><a href="javascript:void (0);">Navigation menu</a>
<ul>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">purchase</a></li>
</ul>
</li>
<li><a href="javascript:void (0);">Enterprise purchasing</a>
<ul>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">Business Review</a></li>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">Enterprise Quotes</a></li>
</ul>
</li>
<li><a href="javascript:void (0);""Quotes</a>
<ul>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">Navigation 1</a></li>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">Navigation 2</a></li>
<li><a href="javascript:void (0);" onclick="javascript:alert ($(this) .html ());">Navigation 3</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript">
<!-
$(document) .ready (function () {
 var li=$("#mainnav>li");//Find #mainnav Element li;
 var ul;
 li.each (function (i) {//loop through each li
  li.eq (i) .hover (
   function () {
    $(this) .find ("ul"). show ();//Find the ul element in li and set it to display
   },   function () {
    $(this) .find ("ul"). hide ();
   }
  )
 })
})
//->
</script>
</body>
</html>
  • Previous ASP develops XML-based message boards
  • Next JavaScript implementation of Sina Weibo lobby and Tencent Weibo homepage scrolling special effects source code