二级菜单

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.7.1.js"></script>
    <style>
         body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/

div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/

ul,li,ol{list-style:none;}/*去除列表符号*/

img{border:none;}/*去除图片按钮边框*/

a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
.clear{ clear:both;}

        .wrap {
        300px;
       margin:0 auto;
        }
        .wrap ul li {
              199px;
                height:27px;

                margin:4px 0;
                background:#000;
              text-align:center;
              font-weight:bold;
              position:relative;
                }
                    .wrap ul li a {
                      color:#fff;
                      display:block;
                       197px;
                height:25px;
                border:2px solid #FF5B85
                    }
                        .wrap ul li a:hover {
                        color:#ccc;
                        }
        .box {
        300px;
       line-height:29px;
       font-size:16px;
        background:#ccc;
        position:absolute;
        left:199px;
        top:0;
        z-index:6;
        display:none;
        opacity:0.5;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="" title="" target="_blank">标题1</a>
            <div class="box">
                111111111111111111111<br />
                 111111111111111111111
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题2</a>
            <div class="box">
                22222222222222<br />
                 222222222222
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题3</a>
            <div class="box">
              3333333333333<br />
                 3333333333333<br />
                 3333333333333<br />
                 3333333333
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题4</a>
            <div class="box">
                44444444444444<br />
                44444444444444<br />
                44444444444444<br />
                44444444444444<br />
                44444444444444
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题5</a>
            <div class="box">
               555555555555<br />
               5555555555555
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题6</a>
            <div class="box">
                66666<br />

66666<br />
66666<br />

                 66666<br />
                 66666<br />
                 66666<br />
                 6666
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题7</a>
            <div class="box">
                7777777777777777<br />
                 7777777777
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题8</a>
            <div class="box">
               8888888888888888<br />
                 8888888888
            </div>
        </li>
        <li><a href="" title="" target="_blank">标题9</a>
            <div class="box">
                199999911<br />
                 1999999999999
            </div>
        </li>
    </ul>

</div>
    <script>
        $(document).ready(function () {
            $(".wrap li").each(function (i) {
                $(this).mouseover(function () {
                    //alert("ok")
                    $(".box").hide();
                    $(".box").eq(i).show();
                })
            })
        })
    </script>
</body>
</html>