My dropdown menu don\'t work when i hover it答案

【问题标题】：My dropdown menu don't work when i hover itMy dropdown menu don\'t work when i hover it
【发布时间】：2022-12-02 01:43:42
【问题描述】：

Hello everyone when i hover the a tag i class dropdown dropmenu won't apear.

I try to change .dropdown by nav tag and it works but it works when i hover on the whole nav.

CSS :

.dropmenu {
    display: none;
    position: absolute;
    text-align: center;
    background-color: #fafafa;
    margin-top: 20px;
    width: 100%;
    height: 100%;

}


}

.dropdown :hover: .dropmenu {
    display: block;

}

HTML

<header>
    <nav>
        <div class="navleft"><h1>Morocco.</h1></div>
        <div class="navmid">
            <ul>
                <li>
                    <div class="dropdown">
                    <a href="">Decouvrir le Maroc</a>
                    </div>
                    <div class="dropmenu">
                        <ul>
                            <li>Histoire</li>
                            <li>Histoire</li>
                            <li>Histoire</li>
                            <li>Histoire</li>
                        </ul>
                </li>
        </div>
        <li><a href="">Destination</a></li>
        <li><a href="">Infos Pratique</a></li>
        <li><a href="">Nous contacter</a></li>
        </ul>
        </div>
        <div class="navright">
            <img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt=""/>
        </div>
    </nav>
</header>

I try to replace .dropmenu by nav tag and it work but it work on the all navbar and not a only

【问题讨论】：

change that to .dropdown:hover .dropmenu {...} (watch the spaces/non-spaces)

标签： html css drop-down-menu frontend hover

【解决方案1】：

You have errors on CSS and HTML

<header>
<nav>
    <div class="navleft"><h1>Morocco.</h1></div>
    <div class="navmid">
        <ul>
            <li>
                <div class="dropdown">
                  <a href="">Decouvrir le Maroc</a>
                </div>
                <div class="dropmenu">
                    <ul>
                        <li>Histoire</li>
                        <li>Histoire</li>
                        <li>Histoire</li>
                        <li>Histoire</li>
                    </ul>
                  </div>
            </li>
    <li><a href="">Destination</a></li>
    <li><a href="">Infos Pratique</a></li>
    <li><a href="">Nous contacter</a></li>
    </ul>
    </div>
    <div class="navright">
        <img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" alt=""/>
    </div>
</nav>

.dropmenu {
    display: none;
    position: absolute;
    text-align: center;
    background-color: #fafafa;
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.dropdown:hover ~ .dropmenu {
    display: block;
}

First: the <div class="dropmenu"> is not closing at the good place

Second: you have an extra bracket that you don't need in your CSS file

Three: the css is not good (the ~ is used to sibling "brothers" element)

I don't know if my english is good enough, but hope it will help you

【讨论】：