在悬停时显示非兄弟/立即div

Question

我试图在3层下拉菜单中显示非兄弟/立即div。

浏览广告 - 工作 - XZY

            <a href="#">Browse Ads</a>

                <div class="sub-nav-container"  >
                     <div class="layout-container">

                        <div  class="sub-navs">
                            <p class="sub-nav-title">Ads Category</p>
                            <a id="sub-nav-job" href> Jobs Available</a>

                            <a id="sub-nav-services" href>Services</a>
                        </div>

                        <div   class="sub-navs">
                            <p class="sub-nav-title">Favourites</p>

                            <div id="sub-nav-job-sub"  class="sub-nav-sub">
                                <a href>IT</a>
                                <a href>office</a>
                            </div>

                            <div id="sub-nav-real-estate-sub" class="sub-nav-sub">
                                <a href>Rent Apartment</a>
                                <a href>Buy House</a>
                            </div>
                        </div>  

                     </div>
                </div>  

#site-navigation  .sub-navs  .sub-nav-sub {visibility:hidden}    
#site-navigation a#sub-nav-job:hover  > #sub-nav-job-sub {  visibility: visible}

但我没有得到结果。

TIA的努力。