二级下拉菜单

//css样式

.tab_math{ position:relative; z-index:999;}
.mainNav_0121 UL LI .mathSelect{ display:none; background-color:#fff; border:2px solid #0081B1; border-top:none; width:108px; position:absolute; z-index:9999; *left:0px;}
.mainNav_0121 UL LI .mathSelect p a{ font-weight:normal; font-size:12px; color:#c00; width:auto;background:url(http://img.eduuu.com/jiajiao/images/index59/reddot.gif) no-repeat 10px 13px; text-align:left; padding-left:20px;}
.mainNav_0121 UL LI .mathSelect p a:hover{color:#c00; background:#ffe1e1 url(http://img.eduuu.com/jiajiao/images/index59/reddot.gif) no-repeat 10px 13px;}

 html页面

<LI xes_id="head_menu_004" class="tab_math"><A onMouseDown="hits('nav05')"

  href="http://sh.jiajiaoban.com/shiti/" target="_blank">杯赛</A>
    <div class="mathSelect tab_con">
        <div>
            <p><a href="http://baidu.com" target="_blank">中</a></p>
            <p><a href="http://ok.com" target="_blank">小</a></p>
            <p><a href="http://no.com" target="_blank">大</a></p>
        </div>
    </div>

  </LI>

js页面

<script type="text/javascript">
    $(function(){
                $('.tab_math').hover(function(){
                        $(this).find('.mathSelect').show();
                 },function(){
                        $(this).find('.mathSelect').hide();
                 })
    });
  </script>

你可能感兴趣的:(二级下拉菜单)