<!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. 阅读STL源码剖析之list

    首先,以我之愚见,觉得有两个地方可以优化一下,不知对否,有待商榷: 1.在list的结点定义中 template<typename T> struct __list_node { type ...

  2. java数据结构-非线性结构之树

    一.树状图 树状图是一种数据结构,它是由n(n>=1)个有限节点组成的具有层次关系的集合.因其结构看起来想个倒挂的树,即根朝上,叶子在下,故被称为"树". 特点: 1. 每个 ...

  3. Hibernate学习之get和load区别

    结论: insert():插入记录并将同步更新到session缓存. update():更新记录并同步更新到session缓存. delete():删除记录并同步更新session缓存. get(): ...

  4. ASP.NET MVC提交到服务器的几种方法

    多年不搞WEB开发了,最近有个小活干干,记录一下学习的心得. 以下为几种脚本向服务器提交的方法: 1. $.ajax({ type: "GET", url: "/Test ...

  5. 如何利用 _ViewStart.cshtml对页面添加代码？

    _ViewStart.cshtml 添加的代码会出现在页面的最上面(<html> 之前) .这样就造成了我原先很多页面出现兼容性问题(经难是因为<html>之前出现了其它的代码 ...

  6. PreferenceActivity的使用

    PreferenceActivity是一个非常有用的基类,当我们开发Android项目时避免不了选项设置,这些设置习惯用Preference来保存.Android专门为这种Activity提供了便捷的 ...

  7. android82 文件下载框架xUtils

    package com.itheima.xutils; import java.io.File; import com.lidroid.xutils.HttpUtils; import com.lid ...

  8. LabView 快捷键

    对象调整和移动Shift-click 选择多个对象,在现有选择的基础上添加对象(方向键) 以一个像素为单位移动所选对象Shift- 以几个像素为单位移动所选对象Shift-click (拖动对象) 在 ...

  9. HttpServlet请求重定向

    方法一: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcep ...

  10. 也谈android开发图像压缩

    long long ago,给学院做的一个通讯录App需要有一个上传图像的功能,冥思苦想,绞尽脑汁后来还是没解决(学生时代的事),于是就直接上传原图了,一张图片2M到3M,这样我的应用发布之后,那绝对 ...