懸停子菜單不起作用

我想創建一個子菜單，當我懸停Cath時，我想顯示Insider和Outsider。（所有我想要的東西用CSS來實現）懸停子菜單不起作用

這裏是我的代碼，但東西拿錯我的代碼

/* ALL A HOVER */ 
 
.cath:hover > ul.submenu-items { 
 
    background:#778; 
 
} 
 

 
/* INNER UL HIDE */ 
 
.cath ul.submenu-items { 
 
    background:rgba(0,0,0,0.1); 
 
    padding-left:20px; 
 
    transition: max-height 0.2s ease-out; 
 
    max-height:0; 
 
    overflow:hidden; 
 
} 
 
/* INNER UL SHOW */ 
 
.cath:hover > ul.submenu-items{ 
 
    max-height:500px; 
 
    transition: max-height 0.25s ease-in; 
 
}

<div class='wr-element-container wr-element-submenu cath' ><div class="block-sub-menu"> 
 
    <a class=" caption" title="cath"><span class=""><span class="ig-menu-title">Cath </span></span></a> 
 
    <div class="clearfix"></div> 
 
    <span class="divider"></span> 
 
    <ul class="submenu-items "> 
 
    <li id="menu-item-1971" class="menu-item-1971"><a>Inside</a></li> 
 
    <li id="menu-item-1972" class="menu-item-1972"><a >Outside</a></li> 
 
    </ul> 
 
\t </div>

來源

2017-05-25 JORd

刪除>選擇，它會工作得很好。

>選擇器只適用於直接的孩子，你的元素不是直接子cath，這意味着你需要使用空間來代替。

.cath:hover ul.submenu-items{ 
     .... 
    }

見代碼片段：

/* ALL A HOVER */ 
 
.kathetou:hover > ul.submenu-items { 
 
    background:#778; 
 
} 
 

 
/* INNER UL HIDE */ 
 
.cath ul.submenu-items { 
 
    background:rgba(0,0,0,0.1); 
 
    padding-left:20px; 
 
    transition: max-height 0.2s ease-out; 
 
    max-height:0; 
 
    overflow:hidden; 
 
} 
 
/* INNER UL SHOW */ 
 
.cath:hover ul.submenu-items{ 
 
    max-height:500px; 
 
    transition: max-height 0.25s ease-in; 
 
}

<div class='wr-element-container wr-element-submenu cath' ><div class="block-sub-menu"> 
 
    <a class=" caption" title="cath"><span class=""><span class="ig-menu-title">Cath </span></span></a> 
 
    <div class="clearfix"></div> 
 
    <span class="divider"></span> 
 
    <ul class="submenu-items "> 
 
    <li id="menu-item-1971" class="menu-item-1971"><a>Inside</a></li> 
 
    <li id="menu-item-1972" class="menu-item-1972"><a >Outside</a></li> 
 
    </ul> 
 
\t </div>

來源

2017-05-25 18:17:51 Chiller

懸停子菜單不起作用

回答

相關問題