<!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" />
<title>my_news</title>
<style>
*{padding:0;list-style:none;margin:0;}
body{background:#666;}
.linBox{margin-top:10px;margin-left:10px;width:70px;}
.linBox ul li a{color:#fff; font-size:12px; text-decoration:none;background:#333;padding:8px;margin:4px;float:left;border:1px solid #fff;position:relative; width:100px;}
.linBox ul li .linBoxList{background:#ccc; height:330px;width:300px;position:absolute; left:118px;border:1px solid #fff; font-size:12px;color:#000;padding:10px;display:none;top:14px;z-index:1;}
</style>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".linBox ul li").hover(function(){
        $(this).find(".linBoxList").show();
    },
    function(){
        $(this).find(".linBoxList").hide();
    });
});
</script>
</head>
<body>
<div class="linBox">
    <ul>
        <li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">mmmmmm</a> <a href="">mmmmmm</a> <a href="">mmmmmm</a>
            </div>
        </li>

<li>
            <a href="">yyyyyyyyyyy</a>
            <div class="linBoxList">
            <a href="">yyyyyyyyyy</a>
            </div>
        </li>

<li>
            <a href="">zzzzzzzzzz</a>
            <div class="linBoxList">
            <a href="">zzzzzzzzz</a>
            </div>
        </li>

<li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>

<li>
            <a href="">xxxxxxxxxx</a>
            <div class="linBoxList">
            <a href="">1111111111111</a>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

jquery 左侧展开栏目的更多相关文章

  1. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  2. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  4. 基于jQuery左侧大图右侧小图切换代码

    基于jQuery左侧大图右侧小图切换代码是一款带右侧缩略图选项卡的jQuery图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  6. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

  7. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  8. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  9. jQuery 当前展开其他收缩 三级下拉菜单（转载）

    jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. 开发小技巧：C#逐个输出字符

    静态自定义方法: static int counter = 0; static string displayString = "This string will appear one let ...

  2. 使用VNC实现多用户登录linux系统

    vmare版本:12.0.0 build-2985596

  3. 网上下载的 java开源项目 如何 打jar包

    目前很多java开源项目(例如qlexpress)只提供了源码,没有提供jar,下面提供maven打jar包的方法. 1.进入qlexpress下载后源代码所在的目录,此目录应包含pom.xml,如下 ...

  4. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  5. [置顶] sql 向另一个表导数据

    1.如果目的表已经存在: 这两个表结构必须一致 insert into table1 select * from tabel2 2.如果目的表不存在: 这个类似与克隆表 select * into t ...

  6. Javascript——初步

    1.基本概念 Javascript是一门脚本语言,它是一门解释性的语言.网页和用户之间实时.动态的进行交互. 2.特点 简单性:没有严格的数据类型.语句简单而紧凑. 安全性:仅仅能通过浏览器实现浏览和 ...

  7. redis学习大全

     http://blog.csdn.net/menergy/article/details/17577985 http://blog.sina.com.cn/s/blog_64008ed70102uy ...

  8. 修改Tomcat 6 默认的ROOT

    1.找到conf/server.xml. 2.找到Host节点. 3.在该节点中添加子节点<Context path="" docBase="项目名称" ...

  9. Linux shell的&&和||--转载

    Linux shell的&&和||   shell 在执行某个命令的时候,会返回一个返回值,该返回值保存在 shell 变量 $? 中.当 $? == 0 时,表示执行成功:当 $? ...

  10. 11.12 noip模拟试题

    题目名称 加密 冒泡排序图 重建可执行文件名 encrypt bubble rebuild输入文件名 encrypt.in bubble.in rebuild.in输出文件名 encrypt.in b ...