让列表元素出现在兄弟的悬停上

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; 
} 

作为替代到相邻的兄弟（+）也可以使用一般的兄弟姐妹（~）选择器。