How can I make the hover pseudo class work in my dropdown

user_17096622 0
Viewed 31

I want to make a dropdown in my navbar , all the css is working except for the hover pseudo class, the dropdown had display none div.nav-dropdown{ display: none;} , and the div.nav-dropdown link should appear when hovering on a.services a.services:hover div.nav-dropdown { display: block;}.

<div class="main-topnav">
        <div class="top-nav-container">
            <div class="top-nav">
                <a class="main" href="#">الرئيسية</a>
                <a class="services hover" href="#">الخدمات</a>
                <a class="hover" href="#">احدث الاعمال</a>
                <a class="hover" href="#">معرض الاعمال</a>
                <a class="hover" href="#">الاخبار و المقالات</a>
                <a class="hover" href="#">اتصل بنا</a>
            </div>
        </div>
        <div class="nav-dropdown">
           <ul class="dropdown-ul">
               <li><a href="#">انظمة دار السعادة</a></li>
               <li><a href="#">MY ROOM</a></li>
               <li><a href="#">I DESIGN</a></li>
               <li><a href="#">IDEAL HOME</a></li>
           </ul>
        </div>
    </div>
css html
1 Answers

I think it could help you.

.top-nav {
    display: flex;
}

.top-nav-link {
    position: relative;
}

.dropdown-ul {
    position: absolute;
    white-space: nowrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
}

.services:hover~.dropdown-ul {
    max-height: 80px;
}

.dropdown-ul:hover {
    max-height: 80px;
}
<div class="main-topnav">
    <div class="top-nav-container">
        <div class="top-nav">
            <div class="top-nav-link"><a class="main" href="#">الرئيسية</a></div>
            <div class="top-nav-link">
                <a class="services hover" href="#">الخدمات</a>
                <ul class="dropdown-ul">
                    <li><a href="#">انظمة دار السعادة</a></li>
                    <li><a href="#">MY ROOM</a></li>
                    <li><a href="#">I DESIGN</a></li>
                    <li><a href="#">IDEAL HOME</a></li>
                </ul>
            </div>
            <div class="top-nav-link"><a class="hover" href="#">احدث الاعمال</a></div>
            <div class="top-nav-link"><a class="hover" href="#">معرض الاعمال</a></div>
            <div class="top-nav-link"><a class="hover" href="#">الاخبار و المقالات</a></div>
            <div class="top-nav-link"><a class="hover" href="#">اتصل بنا</a></div>
        </div>
    </div>
</div>

user_164318420
Related