リスト要素を兄弟ホバーに表示させる

Question

JoomlaのCSS内にCSSのみの応答性ナビゲーションバーを作成しようとしていますが、これまでのナビゲーションバーは小さな画面の場合は大きな画面と尺度で機能します。しかし、生成されたメニューアイコンの上にカーソルを置いたときに、メニュー内の他のすべてのリスト要素が表示されるようにすることはできません。私は>、〜、+セレクターの操作で2時間ぐらい遊んだが、うまくいかないようだ。

表示/非表示を切り替えるには、表示されているアイコンの上にカーソルを置くと、小さな画面のバージョンに他の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; 
} 

を。