Help with the dropbar

1

HTML:

 <header id="home">
                <nav>                                             <!--navigation links -->
                 <p id="name">INK GUYS</p>                             
                 <a href="home.html">HOME</a>
                 <div class="dropdown">
                    <button class="bdrop">ABOUT<i class="fa fa-caret-down"></i></button>
                    <div class="dl">
                    <a href="history.html">History</a>
                    <a href="equipment.html">Equipment</a>
                    </div>
                 </div>
                 <a href="gallery.html">GALLERY</a>
                </nav>                                            <!--navigation links -->
            </header>

CSS:

html body{
 height:100%;
 width:100%;
 margin: 0;
}


nav{
    background-color:#333;
    overflow:hidden;
    border-bottom: 4px solid red;
    position: fixed;
    width: 100%;
    top:0;
    
}
 nav a {
    float:left;
    color: #ff3333;
    text-align: center;
    padding:40px 50px ;
    padding-left: 200px;
    text-decoration: none;
    font-size: 15px;
 }
    
.f{
 color:white;
}
       
   
nav a:hover, .dropdown:hover .bdrop{
    color: #ffcccc;
}
.dl{
 display:none;
 position: absolute;
 background-color: #333;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 min-width: 160px;
 z-index: 1;
}
.dl a{
 float:none;
 color:#ff3333;
 padding: 15px 16px;
 padding-left:200px;
 display:block;
 text-align: left;
 text-decoration: none;
}
.dl a:hover{
 background-color:black;

}
.dl:hover a{
 display:block;
}


.dropdown{
 float: left;
 overflow: hidden;
}
.dropdown .bdrop{
 font-size:15px;
 border:none;
 outline: none;
 color: #ff3333;
 padding:40px 50px;
 background-color: inherit;
 font-family: inherit;

The drop bar is not working. Give me some advices,please
Thanks

2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

You need to be more specific regarding “is not working”. What are you expecting your code (be specific about which section) to do and then tell us what it is doing instead? Otherwise, we may think you are referring to something completely different.

Also, is this all of the code? Do you have this in a Codepen that you could share with us? That would give us a much better idea of all the external libraries you may or may not be using.

4

When I move and click a button ABOUT
It does not show me all the link of HISTORY and EQUIPMENT
Thanks for helping me

5