一款jQuery插件+CSS打造的左侧菜单效果

浏览数：22 / 时间：2015年06月09日

<!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>一款jQuery插件+CSS打造的左侧菜单效果-石家庄苗木-石家庄渣浆泵</title>
    <script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script>
    <script>
    $().ready(function(){$(".testbox ul li").hover(function(){$(this).find(".boxshow").show();},function(){$(this).find(".boxshow").hide();});});
    </script>
    <style type="text/css">
    <!--
    * {
    padding:0;
    list-style:none;
    margin:0
    }
    body {
    background:#666;
    }
    .testbox {
    margin-top: 10px;
    margin-left: 10px;
    width: 200px;
    }
    .testbox ul li a {
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    background-color: #333;
    padding: 8px;
    margin: 4px;
    float: left;
    border: 1px solid #FFF;
    position: relative;
    width: 100px;
    }
    .testbox ul li a:hover {
    color: #000;
    font-size: 12px;
    text-decoration: none;
    background-color: #CCC;
    padding: 8px;
    float: left;
    position: relative;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFF;
    border-bottom-color: #FFF;
    border-left-color: #FFF;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC;
    z-index: 2;
    width: 87px;
    }
    .testbox ul li .boxshow {
    background-color: #ccc;
    height: 330px;
    width: 300px;
    position: absolute;
    left: 118px;
    border: 1px solid #FFF;
    font-size: 12px;
    color: #000;
    padding: 10px;
    top: 14px;
    display: none;
    z-index: 1;
    }
    -->
    </style>
    </head>
    <body>
    <div class="testbox">
    <ul>
    <li><a href="#">测试分类标题1</a>
    <div class="boxshow">分类标题1的内容</div>
    </li>
    <li><a href="#">测试分类标题2</a>
    <div class="boxshow">分类标题2的内容</div>
    </li>
    <li><a href="#">测试分类标题3</a>
    <div class="boxshow">分类标题3的内容</div>
    </li>
    <li><a href="#">测试分类标题4</a>
    <div class="boxshow">分类标题4的内容</div>
    </li>
    <li><a href="#">测试分类标题5</a>
    <div class="boxshow">分类标题5的内容</div>
    </li>
    <li><a href="#">测试分类标题6</a>
    <div class="boxshow">分类标题6的内容</div>
    </li>
    <li><a href="#">测试分类标题7</a>
    <div class="boxshow">分类标题7的内容</div>
    </li>
    <li><a href="#">测试分类标题8</a>
    <div class="boxshow">分类标题8的内容</div>
    </li>
    <li><a href="#">测试分类标题9</a>
    <div class="boxshow">分类标题9的内容</div>
    </li>
    </ul>
    </div>
    </body>
    </html>
    <br>第一次运行本代码，请刷新一下页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><hr>