<!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. python爬虫学习(3)_模拟登陆

    1.登陆超星慕课,chrome抓包,模拟header,提取表单隐藏元素构成params. 主要是验证码图片地址,在js中发现由js->new Date().getTime()时间戳动态生成url ...

  2. rtsp的东西

    http://ubuntuforums.org/showthread.php?t=1544946 http://www.live555.com/liveCaster/liveInput.html ht ...

  3. 普通身份运行Tomcat

    普通身份运行Tomcat 转载1   权限分配问题 su - username -c “command”这样的形式可以使用任意一个有执行权限的用户执行 -c后边的命令. 注意,- username中间 ...

  4. s3c6410 linux gadget hid驱动

    s3c6410 linux gadget hid驱动调了我一个多星期了今天终于搞定了,来跟大家分享下. 上一个星期纠结了一个星期的寄存器,试了N次,不管把3.1和3.7的hid驱动移植过来也是一样的情 ...

  5. wordpress主题制作常用基本的模板及说明

    style.css : CSS(样式表)文件,一般包括主题声明和通用css样式代码 index.php : 主页模板,一般用来做网站的首页 header.php : Header模板,一般是所有页面的 ...

  6. IE无法打开internet网站已终止操作的解决的方法

    用IE内核浏览器的朋友,或许不经意间会碰到这样滴问题: 打开某个网页时,浏览器“嘣”跳出一个提示框“Internet Explorer无法打开Internet 站点...已终止操作”.而大多数情况下该 ...

  7. java与javax有什么区别？

    java 是java j2sdk 中的类库,也就是Java Development kit . 它提供也一些基础的东西,如io库.桌面程序的类库,如awt.集合库(如Collection.List.M ...

  8. SQL Server 2005恢复数据库详细图文教程

    不少需要用到sql2005的程序,有很多新手还是会操作,这里写个详细的图文教程送个菜鸟们,高手请飘过.适用于独立主机的朋友使用,如果你还没安装,请按照这个教程来安装 SQL Server 2005图文 ...

  9. 学习微信小程序之css14浮动的特性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. PHP&nbsp;支持的协议／封装协议列表

    附录 L. 支持的协议/封装协议列表 目录 文件系统 Socket HTTP 和 HTTPS FTP 和 FTPS PHP 输入/输出流 压缩流 Secure Shell 2 音频流  以下是 PHP ...