讓列表元素出現在兄弟的懸停上

Question

我試圖在Joomla CSS中創建一個僅支持CSS的響應式導航欄，到目前爲止，導航欄適用於大屏幕和小屏幕的縮放。但是，當鼠標懸停在生成的菜單圖標上時，我無法獲得菜單中的所有其他列表元素。我已經玩了兩個小時，操縱了>，〜和+選擇器，但它似乎不起作用。

要重申/簡化，我希望其他li元素在顯示的圖標上懸停時顯示在小屏幕版本中。這可能是一個純粹的CSS解決方案嗎？

當前實現如下。

網站：http://2017.grooverjazz.nl/

HTML標記：

<header> 
    <jdoc:include type="modules" name="navigationbar" style="xhtml" /> 
    <a href="#" class="collapseicon">&#9776;</a> 
</header> 

當前導航欄CSS：

header { 
    background: #12171d; 
    border-bottom: 1px solid #333333; 
    opacity: 0.9; 
    position: fixed; 
    text-align: center; 
    font-size: 150%; 
    width: 100%; 
    top: 0; 
    z-index: 999; 
} 

header a:hover { 
    color: #da8203; 
    text-decoration: none; 
} 

header ul { 
    list-style: none; 
    margin: 0; 
    padding: 0 8vw; 
} 

header li:first-child { 
    float: left; 
    font-weight: 700; 
} 

header li:not(:first-child) { 
    display: none; 
} 

header li a { 
    border-bottom: 3px solid transparent; 
    color: #cccccc; 
    padding: .7em .7em; 
    margin-bottom: -1px; 
} 

.collapseicon { 
    padding: 0 9vw 0 0; 
    float: right; 
} 

.collapseicon:hover > header li { 
    display: inline!important; 
} 

@media (min-width: 950px) { 
    header li a:hover { 
    border-color: #da8203; 
    } 

    header li { 
    display: inline!important; 
    } 

    header li a { 
    display: inline-block; 
    } 

    header li:last-child { 
    float: right; 
    } 

    .collapseicon { 
    display: none; 
    } 
} 

Answer 1

有沒有以前的兄弟選擇，所以你必須要更改順序圖標和模塊表：

<header> 
    <a href="#" class="collapseicon">☰</a> 
    <div class="moduletable"> 
    <ul class="nav menu"> 
     <!-- ... --> 
    </ul> 
    </div> 
</header> 

然後選擇該圖標的懸停隱藏<li>元件是這樣的：

.collapseicon:hover + .moduletable li { 
    display: block; 
} 

作爲替代到相鄰的兄弟（+）也可以使用一般的兄弟姐妹（~）選擇器。