Hello Friends đź‘‹,

Welcome To Infinitbility! ❤️

We use menu and submenus (dropdown) concepts on each react project for this we use some package like reactstrap or Material UI (MUI) but we can do this by using some simple CSS code also.

Today, We write some CSS and HTML code in react to make hoverable menu and on hower we will show some sub menus also.

Let start today’s tutorial React hoverable menu example using CSS

First, i have created react hoverable menu skelton using html in react App.js file.

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>React hoverable menu example using CSS</h1>
      <div>
        <div class="navigation">
          <a href="#">Menu 1</a>
          <div class="navigation-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
        <div class="navigation">
          <a href="#">Menu 2</a>
          <div class="navigation-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
        <div class="navigation">
          <a href="#">Single Menu</a>
        </div>
      </div>
    </div>
  );
}

And then wrote CSS for work menu hoverable.

.navigation {
  position: relative;
  display: inline-block;
}

.navigation-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  border-radius: 4px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.navigation a {
  color: black;
  padding: 12px;
  margin: 0;
  text-decoration: none;
  display: block;
}

.navigation a:hover {
  background-color: #ddd;
  border-radius: 4px;
}

.navigation:hover .navigation-content {
  display: block;
}

For output, i have added code on sandbox check below attached Sandbox.

Thanks for reading…