<!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. 转载：C++之高精度算法

    C++之高精度算法 注意:本文转载自http://blog.sina.com.cn/s/blog_4fdb102b010087ng.html,十分感谢原作者:忍者    前言:由于计算机运算是有模运算 ...

  2. usaco 地震 && 奶牛观光

    Usaco 地震: Description 一场地震把约翰家的牧场摧毁了,坚强的约翰决心重建家园.约翰已经重建了N个牧场, 现在他希望能修建一些道路把它们连接起来.研究地形之后,约翰发现可供修建的道路 ...

  3. PC-全国的 DNS服务商

    我们请选第2个.然后根据自己的省市来填写..我复制了下版主给的网站 北京:202.96.199.133 202.96.0.133 202.106.0.20 202.106.148.1 202.97.1 ...

  4. 推荐一个markdown编辑器-Haroopad

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:推荐一个markdown编辑器-Haroopad.

  5. 【转】Android异常：that was originally added here

    ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 02-19 15:08:02.228: E/WindowManager(22172): Activity  ...

  6. Cocos2d-x 3.1.1 学习日志4--cocos2d-x解决中文乱码问题的几种办法

    做个打飞机的游戏,由于版本号太新,网上基本没有教教程,我的版本号是cocos2d-x 3.1.1的.今天遇到cocos2dx中中文乱码的问题.无奈仅仅好Google百度寻求答案,明确了这个问题的缘由. ...

  7. 基于HTML5的SLG游戏开发( 三）：认识PureMVC

    在游戏开发中,对于一般网络游戏,由于需要多人协同开发,每个人负责不同的模块开发,为了减少耦合,需要用来一些MVC框架,减少模块之间的耦合.我们现在使用的mvc框架是pureMVC.pureMVC的官网 ...

  8. hdu2007

    import java.util.*;class Main{public static void main(String args[]){Scanner cin=new Scanner(System. ...

  9. oracle多表查询

    多表查询首先要避免笛卡尔集,要避免笛卡尔集,那么查询条件不得少于表的个数-1. 1.显示雇员名,雇员工资以及雇员所在的部门: 2.显示部门号为10的部门名.员工名和工资: 3.显示各个雇员的姓名,工资 ...

  10. Ⅴ.AngularJS的点点滴滴-- 资源和过滤

    资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...