当前位置:编程学习 > JAVA >>

query二级菜单,鼠标经过显示二级分类,大类和小类都有链接

Jquery二级菜单,鼠标经过显示二级分类,大类和小类都有链接
 一般类似向下打开的导航菜单都是小类才有链接,这个因为是鼠标经过而不是点击的,大小类别都是链接
 
 
演示
 
 
XML/HTML Code
<div id="FrontProductsCategory_show01-1293769104214" class="FrontProductsCategory_show01-d1_c2"><div class="menu-first">  
    <ul>  
    <li >  
          <a href="http://www.freejs.net/daohangcaidan.html" target="_self" class="menu-text1">  
                    导航菜单<span></span>  
                </a>  
                <div class="menu-second">  
            <p class="top"></p>  
            <ul>  
                <li>  
                      <a href="http://www.freejs.net/article_daohangcaidan_36.html" target="_self" class="menu-text2">  
                        水平展开菜单,侧拉菜单  
                        </a>  
                        </li>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        A  
                        </a>  
                        </li>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        B<span>(1)</span>  
                        </a>  
                        </li>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        C<span>(5)</span>  
                        </a>  
                        </li>  
                </ul>  
            <p class="bottom"></p>  
          </div>  
          </li>  
       
     
      <li >  
          <a href="" target="_self" class="menu-text1">  
                    表单<span></span>  
                </a>  
                <div class="menu-second">  
            <p class="top"></p>  
            <ul>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        A<span>(12)</span>  
                        </a>  
                        </li>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        B<span>(19)</span>  
                        </a>  
                        </li>  
                <li>  
                      <a href="" target="_self" class="menu-text2">  
                        C<span>(11)</span>  
                        </a>  
                        </li>  
                </ul>  
            <p class="bottom"></p>  
          </div>  
          </li>  
      <li class="menu-none">  
          <a href="" target="_self" class="menu-text1">  
                    焦点图<span>(28)</span>  
                </a>  
                </li>  
        
      </ul>  
  </div>  
</div>   
 
CSS Code
@charset "utf-8";  
.FrontProductsCategory_show01-d1_c2{  
   text-align: left;  
    margin: 0px auto;  
    padding-left: 65px;  
    width: 75%;  
&nb
补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,