My dropdown menu don't work when i hover it-CodePudding

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 ><h1>Morocco.</h1></div>
        <div >
            <ul>
                <li>
                    <div >
                    <a href="">Decouvrir le Maroc</a>
                    </div>
                    <div >
                        <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 >
            <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

CodePudding user response：

You have errors on CSS and HTML

    <header>
    <nav>
        <div ><h1>Morocco.</h1></div>
        <div >
            <ul>
                <li>
                    <div >
                      <a href="">Decouvrir le Maroc</a>
                    </div>
                    <div >
                        <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 >
            <img src="/img/menu_FILL0_wght400_GRAD0_opsz48.svg" 
            alt=""/>
        </div>
    </nav>
</header>

    .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 > 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