Dropdown Menu

1. Create a new functional component for the dropdown, Dropdown.js:

   import React, { useState } from 'react';
   import './Dropdown.css';

   const Dropdown = () => {
     const [dropdownOpen, setDropdownOpen] = useState(false);

     const toggleDropdown = () => {
       setDropdownOpen(!dropdownOpen);
     };

     return (
       <div className="dropdown">
         <button onClick={toggleDropdown} className="dropdown-button">
           Select an option
         </button>
         {dropdownOpen && (
           <ul className="dropdown-menu">
             <li>
               <a href="#option1" onClick={toggleDropdown}>
                 Option 1
               </a>
             </li>
             <li>
               <a href="#option2" onClick={toggleDropdown}>
                 Option 2
               </a>
             </li>
             <li>
               <a href="#option3" onClick={toggleDropdown}>
                 Option 3
               </a>
             </li>
           </ul>
         )}
       </div>
     );
   };

   export default Dropdown;

2. Create a CSS file, Dropdown.css, to style the dropdown and its contents:

   .dropdown {
     position: relative;
   }

   .dropdown-button {
     cursor: pointer;
     background-color: #ffffff;
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: 6px 10px;
     font-size: 14px;
   }

   .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background-color: white;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     min-width: 150px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
   }

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }

   li {
     width: 100%;
   }

   li a {
     display: block;
     text-decoration: none;
     color: #333;
     padding: 10px 15px;
     transition: background-color 0.2s;
   }

   li a:hover {
     background-color: #f1f1f1;
   }

3. Import and use the dropdown component in your main app, for example, in App.js:

   import React from 'react';
   import Dropdown from './Dropdown';

   const App = () => {
     return (
       <div>
         <header>
           {/* Your header content */}
         </header>
         <main>
           <Dropdown />
           {/* Your main app content */}
         </main>
       </div>
     );
   };

   export default App;

Go have some Dropdown Fun now!!