Элементы списка элементов отображаются на странице sibling hover

Question

Я пытаюсь создать настраиваемую навигационную панель только для CSS в Joomla 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; 
} 

В качестве альтернативы соседним собрата (+) вы также можете использовать общий родственный (~) селектор.