Indicoderz

Try it yourself editor

Code

<html>
<head>
<title>Hello</title>
  <style>
    *{
  margin: 0;
  padding: 0;
}
.main{
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:turquoise;
  flex-direction:column; 
}
.dropdown{
  width: 100px;
  height: 20px;
  visibility: hidden;
}
.main button{
  background-color:#fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  outline: none;
  width: 100px;
  height: 30px;
}
.main button:hover{
  background-color:rgb (203, 238,243); 
  
}
.main ul{
  background-color: white;
  list-style: none;
  margin-top: 10px;
  transform: translateX(30%);
  overflow: hidden;
}
.main ul li{
  width: 100%;
  height: 100%;
  padding: 15px 0px;
  display: flex;
  justify-content: center;
  
}
main ul li:hover{
  background-color:rgb(203,238,234);
  
}
main ul li a{
  color: #000;
  text-decoration: none;
  
}
.active{
  visibility: visible;
}
 
    </style>
</head>

<body>
  <div class="main">
    <button class="button">articles</button>
    <div class="dropdown">
      <ul>
        <li><a  href="" > articles1</a></a></li>
        <li><a  href="" > articles2</a></a></li>
        <li><a  href="" > articles3</a></a></li>
        <li><a  href="" > articles4</a></a></li>
      </ul>
    </div>
  </div>
  <script>
    var button = document.querySelector(".button");
    button.addEventListener("click",show);
    function show(){
    var list = document.querySelector(".dropdown");
    list.classList.toggle("active");
    }
  </script>
</body>
</html>

Output

Drop down

Contact Form