如何在非子元素，兄弟元素或父元素的另一个元素悬停时更改CSS

Question

我正在尝试创建一个大型菜单，但是悬停显示菜单无法正常工作。

这是我的html结构的（相关）部分：

<div class="scrollmenu">
    <div class="header-middle">
        <div class="container">
            <div class="row space-between">
                <div class="logo-middle">
                    <a href="home"><img src="http://st.nl/new/assets/images/logo.png" alt="website"></a>
                </div>
                <div class="menu vertical-center">
                    <ul>
                        <li><a href="home">Home</a></li>
                        <li><a href="home">Informatie</a></li>
                        <li><a href="home">Producten</a></li>
                        <li><a href="home">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom">
        <div class="container">
            <div class="row">
                <div class="categoriemenu vertical-center">
                    <ul>
                        <li><a href="#">Buitenreclame</a></li>
                        <li><a href="#">Vlaggen</a></li>
                        <li><a href="#">Binnenreclame</a></li>
                        <li><a href="#">Beurs &amp; evenement</a></li>
                        <li><a href="#">Interieur &amp; inrichting</a></li>
                        <li><a href="#">Stickers &amp; drukwerk</a></li>
                        <li><a href="#">Materialen</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="product-bottom">
        <div class="container">
            <div class="row">
                <div class="product-menu">
                    <div class="kolom">
                        <h2>Gevelreclame</h2>
                        <ul>
                            <li><a href="">Aluminium bord</a></li>
                            <li><a href="">Reclame bord</a></li>
                            <li><a href="">Raamfolie</a></li>
                            <li><a href="">Gevelbord</a></li>
                            <li><a href="">Raambord</a></li>
                            <li><a href="">Gevelvlag</a></li>
                            <li><a href="">Kioskvlag</a></li>
                            <li><a href="">Gevelbanier</a></li>
                            <li><a href="">Outdoor textielframe</a></li>
                            <li><a href="">Raamvlag</a></li>
                            <li><a href="">Freesletters</a></li>
                        </ul>
                        <h2>Lichtreclame</h2>
                        <ul>
                            <li><a href="">Lichtbakplaat</a></li>
                            <li><a href="">Lichtbakposter</a></li>
                        </ul>
                    </div>
                    <div class="kolom">
                        <h2>Gevelreclame</h2>
                        <ul>
                            <li><a href="">Aluminium bord</a></li>
                            <li><a href="">Reclame bord</a></li>
                            <li><a href="">Raamfolie</a></li>
                            <li><a href="">Gevelbord</a></li>
                            <li><a href="">Raambord</a></li>
                            <li><a href="">Gevelvlag</a></li>
                            <li><a href="">Kioskvlag</a></li>
                            <li><a href="">Gevelbanier</a></li>
                            <li><a href="">Outdoor textielframe</a></li>
                            <li><a href="">Raamvlag</a></li>
                            <li><a href="">Freesletters</a></li>
                        </ul>
                        <h2>Lichtreclame</h2>
                        <ul>
                            <li><a href="">Lichtbakplaat</a></li>
                            <li><a href="">Lichtbakposter</a></li>
                        </ul>
                    </div>
                    <div class="kolom">
                        <h2>Gevelreclame</h2>
                        <ul>
                            <li><a href="">Aluminium bord</a></li>
                            <li><a href="">Reclame bord</a></li>
                            <li><a href="">Raamfolie</a></li>
                            <li><a href="">Gevelbord</a></li>
                            <li><a href="">Raambord</a></li>
                            <li><a href="">Gevelvlag</a></li>
                            <li><a href="">Kioskvlag</a></li>
                            <li><a href="">Gevelbanier</a></li>
                            <li><a href="">Outdoor textielframe</a></li>
                            <li><a href="">Raamvlag</a></li>
                            <li><a href="">Freesletters</a></li>
                        </ul>
                        <h2>Lichtreclame</h2>
                        <ul>
                            <li><a href="">Lichtbakplaat</a></li>
                            <li><a href="">Lichtbakposter</a></li>
                        </ul>
                    </div>
                    <div class="kolom">
                        <h2>Gevelreclame</h2>
                        <ul>
                            <li><a href="">Aluminium bord</a></li>
                            <li><a href="">Reclame bord</a></li>
                            <li><a href="">Raamfolie</a></li>
                            <li><a href="">Gevelbord</a></li>
                            <li><a href="">Raambord</a></li>
                            <li><a href="">Gevelvlag</a></li>
                            <li><a href="">Kioskvlag</a></li>
                            <li><a href="">Gevelbanier</a></li>
                            <li><a href="">Outdoor textielframe</a></li>
                            <li><a href="">Raamvlag</a></li>
                            <li><a href="">Freesletters</a></li>
                        </ul>
                        <h2>Lichtreclame</h2>
                        <ul>
                            <li><a href="">Lichtbakplaat</a></li>
                            <li><a href="">Lichtbakposter</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当我将product-menu悬停在a内时，我试图使categoriemenu出现。

我认为这会起作用：

.categoriemenu ul li a:hover .product-menu{
  display:flex;
}