Doing something wrong when trying to make a dropdown mene in CSS

Question

I've been trying to figure out what is why the dropdown menu isnt changing from display: none; into display: block; when i hover over it.

I briefly looked at a dropdown menu CSS tutorial just to get a basic understanding on how it works but after watching it a few times i have no clue what is not working

P.S i am relatively new to this stuff

Code:



    
    
    
    Document
    


    
        
            Test1
            Test2
            Test3
            Test4
            Test5
        
    
    
        
            dropdown1
            dropdown2
            dropdown3
            dropdown4
            dropdown5
        
    

```

user_18452174 · Answer

The dropdown must be in the structure of your styles. You have this style:

.navbar ul li:hover .drop-1{
   display: block;
}

Which means that you have a class navbar, and then ul with some li and, "inside" an element with a drop-1 class. When you are hover that li, then your drop-1 element will be visible.

If you put a dropdown inside some li of your navbar, you can see the dropdown.


    
        
          Test1
          
              
                  dropdown1
                  dropdown2
                  dropdown3
                  dropdown4
                  dropdown5
              
          
      
        Test2
        Test3
        Test4
        Test5

You need one dropdown for each menú in your navbar.

UPDATE

Well, maybe a bit difficult at first but the concept is always the same. Check this:

a span {
   // Any span inside a link will be hidden by default
   display: none;
}

a:hover span {
   // but when you are hover the link, the span will be visible
   display: block;
}

Always visible Visible only on hover

The CSS it's applied to the span but the "hover" of the link it's who change the display of the span.

user_18312494 · Answer

Here your code fixed. Besides Victor clarification there are a few more things you could solve about the code. I paste it here if you want to copy it.

* {
    margin: 0;
    padding: 0;
    border: 0;
}

.navbar ul li {
    display: inline-flex;
    position: relative;
    margin-left: 8rem;
    list-style: none;
    color: white;
    padding: .5rem;
    border-radius: 1rem;
}

.navbar {
    background: rgb(0, 120, 0);
    padding: 1.25rem;
    font-size: larger;
    text-decoration: none;

}

.navbar:link {
    text-decoration: none;
}
a {
    text-decoration: none;
    color: white;
    font-family: sans-serif;
}

.navbar ul li:hover {
    background: rgba(0, 0, 0, 0.7);
}

.drop-1 {
    display: none;
    background-color: darkgreen;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    z-index: 1;
}

.drop-1 a {
    color: lightgreen;
}

.drop-1 ul li {
    border-bottom: 1px solid black;
    padding-bottom: .5rem;
    padding-top: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
}

.drop-1 ul li:last-child {
    border: none;
}

.drop-1 ul li:first-child {
    border-top: 1px solid black;
}

.navbar ul li:hover .drop-1 {
    display: block;
}

Doing something wrong when trying to make a dropdown mene in CSS

2 Answers