CODEWITHSUNDEEP
htmlcss
Surfer2u
Surfer2u

Reputation: 19

My on hover for my drop down menu is not working

I want the dropdown-content ul to appear if the dropdown li is moused over. I am using the :hover psuedo class on the .dropdown class.

It there something I am missing?

Thanks!

    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content li {
        background-color: gray;
    }  

    .dropdown:hover .dropdown-content {
        display: block;
    }
       <div class="menu">
            <ul class="menu-list">
                <li class="menu-list-item dropdown">
                    <a href="https://blah.com/aboutus/">About US</a>
                    <ul class="dropdown-content">
                        <li class="menu-list-item">
                            <a href="https://blah.com/faq/">FAQ</a>
                        </li>
                        <li class="menu-list-item">
                            <a href="https://blah.com/page-2">Produkter</a>
                        </li>
                    </ul>
                </li>                  
                <li class="menu-list-item">
                    <a href="#">Link</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/contact-us">Kontakt Oss</a>
                </li>  
            </ul>
        </div>

Upvotes: 0

Views: 115

Answers (4)

Trupti J
Trupti J

Reputation: 512

.dropdown {
        position: relative;
        display: inline-block;
      }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none; 
        display:none;
    }

    .dropdown-content li {
        background-color: gray;     
        display:none;
    }  

    .dropdown:hover .dropdown-content li{
        display: block;
    }
 <div class="menu">
            <ul class="menu-list">
                <li class="menu-list-item dropdown">
                    <a href="https://blah.com/aboutus/">About US</a>
                      
                    <ul class="dropdown-content" >
                        <li class="menu-list-item">
                            <a href="https://blah.com/faq/">FAQ</a>
                        </li>
                        <li class="menu-list-item">
                            <a href="https://blah.com/page-2">Produkter</a>
                        </li>
                    </ul>
                     </li> 
                              
                <li class="menu-list-item">
                    <a href="#">Link</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/contact-us">Kontakt Oss</a>
                </li>  
            </ul>
        </div>

Upvotes: 0

h-kod
h-kod

Reputation: 21

You must hide "none" first. Can you examine the last part of Css.

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content ul {
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

.dropdown-content li {
 background-color: gray;
}

.dropdown:hover .dropdown-content {
 display: block;
}
.dropdown-content {
 display: none;
}
<div class="menu">
  <ul class="menu-list">
    <li class="menu-list-item dropdown">
      <a href="https://blah.com/aboutus/">About US</a>
      <ul class="dropdown-content">
        <li class="menu-list-item">
          <a href="https://blah.com/faq/">FAQ</a>
        </li>
        <li class="menu-list-item">
          <a href="https://blah.com/page-2">Produkter</a>
        </li>
      </ul>
    </li>
    <li class="menu-list-item">
      <a href="#">Link</a>
    </li>
    <li class="menu-list-item">
      <a href="https://blah.com/contact-us">Kontakt Oss</a>
    </li>
  </ul>
</div>

Upvotes: 1

Mohit Gupta
Mohit Gupta

Reputation: 739

You need to add display: none; css on .dropdown-content class. Check below code:

   .dropdown {
        position: relative;
        display: inline-block;
      }

    .dropdown-content ul  {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content li {
        background-color: gray;
    }  
    .dropdown-content {
        display: none;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    <div class="menu">
        <ul class="menu-list">
            <li class="menu-list-item dropdown">
                <a href="https://blah.com/aboutus/">About US</a>
                <ul class="dropdown-content">
                    <li class="menu-list-item">
                        <a href="https://blah.com/faq/">FAQ</a>
                    </li>
                    <li class="menu-list-item">
                        <a href="https://blah.com/page-2">Produkter</a>
                    </li>
                </ul>
            </li>                  
            <li class="menu-list-item">
                <a href="#">Link</a>
            </li>
            <li class="menu-list-item">
                <a href="https://blah.com/contact-us">Kontakt Oss</a>
            </li>  
        </ul>
    </div>

Upvotes: 1

doğukan
doğukan

Reputation: 27381

.dropdown-content already a ul and there is no ul in it. You should also forget to define display:none

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content  {
  padding: 12px 16px;
  text-decoration: none;
  display: none; /* Did you forget this? */
}

.dropdown-content li {
  background-color: gray;
}  

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="menu">
    <ul class="menu-list">
        <li class="menu-list-item dropdown">
            <a href="https://blah.com/aboutus/">About US</a>
            <ul class="dropdown-content">
                <li class="menu-list-item">
                    <a href="https://blah.com/faq/">FAQ</a>
                </li>
                <li class="menu-list-item">
                    <a href="https://blah.com/page-2">Produkter</a>
                </li>
            </ul>
        </li>                  
        <li class="menu-list-item">
            <a href="#">Link</a>
        </li>
        <li class="menu-list-item">
            <a href="https://blah.com/contact-us">Kontakt Oss</a>
        </li>  
    </ul>
</div>

Upvotes: 1

Related Questions