<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul li{list-style-type:none;text-transform:capitalize;}

#nav .mainlevel{float:left;margin-right:20px;padding-right:3px;background:#ffff00;width:140px;text-align:center; line-height:22px;}
.linHideStyle{display:none;}

</style>
<script type="text/javascript" src="./jquery/jquery-1.7.1.min.js"></script>
<script>

$(document).ready(function(){
  $('li.mainlevel').mousemove(function(){
  $(this).find('ul').removeClass('linHideStyle').slideDown();//you can give it a speed
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').addClass('linHideStyle').slideUp("fast");
  });
});

</script>

<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br />
<div id="menu">
    <ul id="nav">

<li id="mainlevel_01" class="mainlevel">
            <a href="#">第一</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

<li id="mainlevel_02" class="mainlevel">
            <a href="#">第二</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">3333dd</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

<li id="mainlevel_03" class="mainlevel">
            <a href="#">第三</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

<li id="mainlevel_04" class="mainlevel">
            <a href="#">第四季度</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

</ul>
</div>
</body>
</html>

jquery 只有二级下拉菜单的更多相关文章

  1. jQuery动画二级下拉菜单

    在线演示 本地下载

  2. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  3. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  4. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  5. flash滚动图片遮住二级下拉菜单解决方法

    如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...

  6. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  7. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  8. boostrapt的二级下拉菜单

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta conte ...

  9. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

随机推荐

  1. MediaInfo源代码分析 2：API函数

    本文主要分析MediaInfo的API函数.它的API函数位于MediaInfo.h文件中的一个叫做MediaInfo的类中. 该类如下所示,部分重要的方法已经加上了注释: //MediaInfo类 ...

  2. Android模拟器报"Failed To Allocate memory 8"错误的解决办法

    此错误是我们在允许AVD时,选择了默认的AVD插件所致. 解决方法:减少分配的内存大小.修改AVD的config.ini配置文件,将选项“hw.ramSize=1024”从1024改为256.

  3. AX2012服务器配置--Windows Server 2012 如何实现多个用户远程桌面登陆？

    Windows Server 2012 如何实现多个用户远程桌面登陆?说明:Windows Server 2012默认情况下,只运行2个用户远程桌面登陆,这里我们可以通过安装远程桌面会话主机配置来实现 ...

  4. SSO之CAS备忘

    http://blog.chinaunix.net/uid-28380443-id-4740103.html 自己负责的公司基于CAS单点登录平台架构已经上线运行,很多细节的东西是时候备忘一下了,开源 ...

  5. 编码实战Web端联系人的增删改查

    首先画出分析图 实现效果如图 项目下的包如图: 实体包 package com.contactSystem.entiey; public class Contact { private String ...

  6. 搭建Struts框架

    搭建Struts框架 新建项目 [file]-[new]-[web project] 在弹出的对话框中对项目进行命名,点击[finish] 新建项目-> 点击项目右键-> MyEclips ...

  7. 再谈内存管理与ARC运行机制（一）

    内存管理 内存在Objective-C开发中是一种相对稀缺的资源,拿Iphone4为例,它的内存只有512mb,所以妥善的处理好所创造,所使用的每个对象与变量都将成为一个问题.在ARC出现以前,同大部 ...

  8. 屌丝程序猿赚钱之道 之APP

    假设你已经通过APP赚到了钱,那么本文对你而言没有意义.倒是希望你可以给我们诸多建议. 通过制作APP或者说手机应用赚钱,相信是非常多程序猿希望做的事情.也确实有一些人通过APP赚到了钱. 对于程序猿 ...

  9. ios6如何处理内存，分别为前警告后

    这里有一篇文章.非常具体地说明了ios6前后是怎样处理内存警告的: 来自唐巧的技术博客:http://blog.devtang.com/blog/2013/05/18/goodbye-viewdidu ...

  10. STL algorithm算法merge(34)

    merge原型: std::merge default (1) template <class InputIterator1, class InputIterator2, class Outpu ...