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

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