<!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. 3 weekend110的shuffle机制 + mr程序的组件全貌

    前面,讲到了hadoop的序列化机制,mr程序开发,自定义排序,自定义分组. 有多少个reduce的并发任务数可以控制,但有多少个map的并发任务数还没 缓存,分组,排序,转发,这些都是mr的shuf ...

  2. 2 weekend110的mapreduce介绍及wordcount + wordcount的编写和提交集群运行 + mr程序的本地运行模式

    把我们的简单运算逻辑,很方便地扩展到海量数据的场景下,分布式运算. Map作一些,数据的局部处理和打散工作. Reduce作一些,数据的汇总工作. 这是之前的,weekend110的hdfs输入流之源 ...

  3. sublime中安装sublimelinter php 语法检查

    打开控制台,install package 搜 sublimelinter 先安装sublimelinter本体 安装完以后再搜索一下,安装sublimelinter-php 接下来,打开prefer ...

  4. Spring技术内幕——深入解析Spring架构与设计原理（一）IOC实现原理

    IOC的基础 下面我们从IOC/AOP开始,它们是Spring平台实现的核心部分:虽然,我们一开始大多只是在这个层面上,做一些配置和外部特性的使用工作,但对这两个核心模块工作原理和运作机制的理解,对深 ...

  5. Unicode与UTF-8互转(C语言实现)

    1. 基础 1.1 ASCII码 我们知道, 在计算机内部, 所有的信息最终都表示为一个二进制的字符串. 每一个二进制 位(bit)有0和1两种状态, 因此八个二进制位就可以组合出 256种状态, 这 ...

  6. [C#] 常用工具类——应用程序属性信息访问类

    using System; using System.Collections.Generic; using System.Text; using System.Reflection; namespac ...

  7. C#使用Sockets操作FTP【转载】

    using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...

  8. [互联网面试笔试汇总C/C++-7] 寻找两个链表的第一个交点-微策略

    题目:有两个链表,找出他们的第一个交点,要求每个链表只能遍历一次,可以对链表进行任何操作,空间O(1). 思路: 这个题目刚开始看觉得要遍历一次有点困难,但是仔细一想,人家告诉说可以对链表进行任何操作 ...

  9. 【转】Enable ARC in a Cocos2D Project: The Step-by-Step-How-To-Guide Woof-Woof!

    On April 5, 2012, in idevblogaday, by Steffen Itterheim http://www.learn-cocos2d.com/2012/04/enablin ...

  10. Memcached Java Client with sample program--reference

    In my previous post, I listed down most common telnet commands for memcached with sample execution t ...