Goal:
When you have the mouse over the menu text and its background it should be a link included the background. It takes place at menu. The menu has two alternative that is Home and exercisegroup.

Problem:
I was only enable to make the text as a link but not enable to do the background as a link in relation to hover.

If possible, How do I solve it with cure html and css?

Info:
*You also need to take account to responsive design

Stackblitz:
https://stackblitz.com/edit/react-ts-ls5kpn?file=App.tsx

Thank you!

App.css

main {
  overflow-x: hidden;
}

@media screen and (min-width: 800px) {
  main {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    text-align: left;
  }
}
/*
@media screen and (max-width: 600px) {

  main {
    margin-left: 10px;
    margin-right: 10px;
  }
}
*/

import * as React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Home } from './Home';
import { Headers } from './Headers';
import { ExerciseGroup } from './ExerciseGroup';

export default function App() {
  return (
    <BrowserRouter>
      <Headers />
      <br />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/home" element={<Home />} />
          <Route path="/exercisegroup" element={<ExerciseGroup />} />
        </Routes>
      </main>
      <footer>
        <p>Footer</p>
      </footer>
    </BrowserRouter>
  );
}

import React, { useState, Fragment } from 'react';

export const ExerciseGroup = () => {
  return (
    <>
      bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb bbbbbbbb
      bbbbbbbb bbbbbbbb
    </>
  );
};

header css

nav {
  background-color: #3d99ce;
  height: 70px;
}

@media screen and (min-width: 601px) {
  .container2,
  .nav-menu {
    padding-left: 0px;
    text-align: left;
  }

  .nav-menu {
    margin-top: -50px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
  }

  ul.nav-menu > li {
    display: inline-block;
    padding: 0 10px 0 10px;
    line-height: 70px;
  }

  ul.nav-menu > li:hover {
    background-color: #2779bf;
  }

  ul.nav-menu > li > a {
    color: white;
    text-decoration: none;
  }

  .menu-button {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .nav-menu {
    /*display: none; */
    padding: 0 0 0 0;
    list-style: none;
  }

  .navbar-link {
    position: relative;
    z-index: 1;
    border-top: 1px solid white;
    width: 100%;
    margin: 0;
    top: -16px;
    text-align: center;
    line-height: 50px;
    background-color: grey;
  }

  .container2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: 70px;

    justify-content: space-between;
  }

  .hidden {
    display: none;
  }
}

Headers.tsx

import React, { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import './Header.css';

export const Headers = () => {
  const [expandedLinks, setExpandedLinks] = useState(false);

  const toggleLinks = () => () => {
    setExpandedLinks(!expandedLinks);
  };

  return (
    <nav>
      <div className="container">
        <span className="container2">
          <img
            src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png"
            width={70}
            height={70}
          />
          <img
            src="https://www.clipartmax.com/png/full/303-3035787_menu-square-alt-comments-mobile-menu-icon-svg.png"
            className="menu-button"
            style={{ paddingRight: '10px' }}
            width={40}
            height={40}
            onClick={toggleLinks()}
            alt=""
          />
        </span>
        <ul className={expandedLinks ? 'nav-menu' : 'nav-menu hidden'}>
          <li className="navbar-link">
            <Link to="/home" onClick={toggleLinks()}>
              Home
            </Link>
          </li>
          <li className="navbar-link">
            <Link to="/exercisegroup" onClick={toggleLinks()}>
              exercisegroup
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

import React, { useState, Fragment } from 'react';

export const Home = () => {
  return (
    <>
      aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa
      aaaaaaaaa aaaaaaaaaaa aaaaaaaaa aaaaaaaaaaa
    </>
  );
};

CodePudding user response：

Add display:block; to the css styles for the links, that should fix it.

ul.nav-menu > li > a {
  color: white;
  text-decoration: none;
  display: block; //add this
}