<!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. 【转】linux下安装opencv

    Installation in Linux These steps have been tested for Ubuntu 10.04 but should work with other distr ...

  2. Overview of the Packages JAXP

    The SAX and DOM APIs are defined by the XML-DEV group and by the W3C, respectively. The libraries th ...

  3. 使用泛型简单封装NGUI的ScrollView实现滑动列表

    懒,是老毛病了,周末跑了半马,跑完也是一通累,好久没锻炼了..也是懒的,有时都懒的写博客..最近看到项目中各种滑动列表框,本着要懒出水平来的原则,决定花点时间简单处理下(暂时未做列表太多时的优化):1 ...

  4. 笔记本PS/2键盘无法使用，试下这个方法

    用360清理了一下系统,再开机键盘就不灵了,鼠标却可以用. 打开设备管理器,看到PS/2标准键盘有个黄色的感叹号. 属性显示PS/2 标准键盘 Windows 无法加载这个硬件的设备驱动程序.驱动程序 ...

  5. 色情不是我的所有——在法律边缘起舞的 FC2

    [核心提示] 世界上最大的色情站点之中的一个这项「殊荣」只是是 FC2 无心插柳被用户戴上的一顶帽子,这个从 1999 年成立至今已经超过 15 年历史的互联网活化石,远比你想象中更加高深莫測. 一个 ...

  6. Sae 上传文件到Storage

    首先说一下几个地方: 1.上传使用ss.upload("domin域名","源地址","目标地址,也就是storage的地址");假设要上传 ...

  7. 源泉书签，助您管理海量收藏。www.yuanquanshuqian.com，今日更新：多标签功能已实现

    源泉书签.助您管理海量收藏.www.yuanquanshuqian.com,今日更新:多标签功能已实现

  8. 恭贺自己itpub和csdn双双获得专家博客称号

    这是对一个技术人员行业内很难得的认可,记录下来,加油...一切向钱看,明天会更好.

  9. GDB 调试程序系列

    http://blog.csdn.net/haoel/article/category/9197

  10. div随另一个div自动增高

    <script type="text/javascript"> document.getElementById("div1").style.heig ...