W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="4/w3.css">
<body>

<div class="w3-container">
  <h2>Filter Dropdown Hover</h2>
  <p>Mouse-over the dropdown and search for a specific link inside the input field.</p>
  <div class="w3-dropdown-hover">
    <button class="w3-button w3-black">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card w3-light-grey" id="myDIV">
      <input class="w3-input w3-padding" type="text" placeholder="Search.." id="myInput" onkeyup="myFunction()">
      <a class="w3-bar-item w3-button" href="#about">About</a>
      <a class="w3-bar-item w3-button" href="#base">Base</a>
      <a class="w3-bar-item w3-button" href="#blog">Blog</a>
      <a class="w3-bar-item w3-button" href="#contact">Contact</a>
      <a class="w3-bar-item w3-button" href="#custom">Custom</a>
      <a class="w3-bar-item w3-button" href="#support">Support</a>
      <a class="w3-bar-item w3-button" href="#tools">Tools</a>
    </div>
  </div>
</div>

</body>

</html>