JJHH Submenu Test

by Lien Z

HTML

<div id="container">
    <div class="indexCategory">
        <h2>设计/施工</h2>
        <div class="categoryTabWrap">
            <ul class="categoryTab">
                <li>
                    <a href="#" title="设计公司" dataid='64'>设计公司</a>
                    <div class="categoryTabC_c">
                        <div class="categoryTabC_c_l">
                            <div class="companyByTitle">
                                <span class="fl">1</span>
                                <span class="fr pr10">最新口碑</span>
                            </div>
                            <ul class="companyListByCategory"></ul>   
                        </div> 
                    </div>
                </li>
                <li>
                    <a href="#" title="装饰公司">装饰公司</a>
                    <div class="categoryTabC_c">
                        <div class="categoryTabC_c_l">
                            <div class="companyByTitle">
                                <span class="fl">2</span>
                                <span class="fr pr10">最新口碑</span>
                            </div>
                            <ul class="companyListByCategory"></ul>   
                        </div> 
                    </div>
                </li>
                <li>
                    <a href="#" title="监理">监理</a>
                    <div class="categoryTabC_c">
                        <div class="categoryTabC_c_l">
                            <div class="companyByTitle">
                                <span class="fl">3</span>
                                <span class="fr pr10">最新口碑</span>
                            </div>
                            <ul class="companyListByCategory"></ul>   
                        </div> 
                    </div>
                </li>
                <li>
                    <a href="#" title="设计公司" dataid='64'>设计公司</a>
                    <div class="categoryTabC_c">
                        <div class="categoryTabC_c_l">
      ...

CSS

*{margin: 0;padding: 0}
#container{width:500px;height:500px;border:1px solid ;}
.categoryTabWrap{}
.categoryTab{width:180px;height:auto;position:relative;overflow: visible;}
.categoryTab li{font-size:12px; margin-right:10px;margin-bottom:5px;display:inline;height:auto;float:left;overflow: visible;}
.categoryTab li a{color:black}
.indexCategory{overflow: visible;width:200px;height:auto;padding:5px;border:1px solid #ddd;margin-left:10px}
.indexCategory h2{font-size:16px;margin:10px 0 }
.categoryTabC_c{width:180px;height:200px;border:1px solid black;background:#ddd;position: absolute;top:-40px;left:180px;display: none}
.categoryTabCurrent{background:#eee;}

JavaScript

var t;
$('.indexCategory .categoryTab a').on("mouseover", function() {
    var $this = $(this),
        cate_id = $this.attr('dataid');
    t = setTimeout(function() {
        $this.css({
            'color': "red"
        });
        $('.categoryTabC_c:visible').hide();
        $('.categoryTabC_c:visible').closest('.categoryTab').removeClass('categoryTabCurrent')
    $this.siblings('.categoryTabC_c').show();
    $this.parents('ul').addClass('categoryTabCurrent');
    }, 200);

}).mouseout(function() {
    clearTimeout(t);
    $(this).css({
        'color': 'black'
    })
    //$(this).addClass('hui').removeClass('current');
    //$(this).parents('ul').removeClass('categoryTabCurrent')
});

var ccOut
$('.categoryTabC_c').mouseover(function() {
    $('.categoryTabC_c:visible').show()
    console.log($('.categoryTabC_c:visible'))
}).mouseout(function() {
    var $this = $(this);
    $this.delay(200).hide()

})

/*var wrapOut;
 $('.categoryTabWrap').mouseout(function(){
    $this = $(this);
    
    $('.categoryTabC_c:visible').delay(200).hide();
    
   
 })*/