Navigate back to the homepage

React hoverable menu example using CSS

Infinitbility
React
January 5th, 2022 · 1 min read
React hoverable menu example using CSS

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

1import "./styles.css";
2
3export default function App() {
4 return (
5 <div className="App">
6 <h1>React hoverable menu example using CSS</h1>
7 <div>
8 <div class="navigation">
9 <a href="#">Menu 1</a>
10 <div class="navigation-content">
11 <a href="#">Link 1</a>
12 <a href="#">Link 2</a>
13 <a href="#">Link 3</a>
14 </div>
15 </div>
16 <div class="navigation">
17 <a href="#">Menu 2</a>
18 <div class="navigation-content">
19 <a href="#">Link 1</a>
20 <a href="#">Link 2</a>
21 <a href="#">Link 3</a>
22 </div>
23 </div>
24 <div class="navigation">
25 <a href="#">Single Menu</a>
26 </div>
27 </div>
28 </div>
29 );
30}

And then wrote CSS for work menu hoverable.

1.navigation {
2 position: relative;
3 display: inline-block;
4}
5
6.navigation-content {
7 display: none;
8 position: absolute;
9 background-color: #f1f1f1;
10 min-width: 160px;
11 border-radius: 4px;
12 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
13 z-index: 1;
14}
15
16.navigation a {
17 color: black;
18 padding: 12px;
19 margin: 0;
20 text-decoration: none;
21 display: block;
22}
23
24.navigation a:hover {
25 background-color: #ddd;
26 border-radius: 4px;
27}
28
29.navigation:hover .navigation-content {
30 display: block;
31}

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

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to enable or disable scroll in flatlist react native?

How to enable or disable scroll in flatlist react native?

React Native, Enable or Disable flatlist scroll example.

January 4th, 2022 · 1 min read
How to disable button after one click in react native?

How to disable button after one click in react native?

React Native, Disable button after one click on it example.

January 3rd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]