For a project, I need to create the following navigation bar:

Like you can see the buttons of this navigation bar have mainly two specificities:

1. When we don't hover or active the navigation buttons, there is a 'grey underline' that takes the screen full width.
2. When we hover or active a button, the corresponding button's color and underline become blue.

To be honest, I'm completely lost about how to implement these two specificities.

At first, I tried to style the by default underline of the .nav-button (text-decoration-offset) and also their border-bottom, but I always have the two following problems:

1. My underline / border-bottom don't take the full width of the screen.
2. I can't limit where the hover / active effect on the line begins and end.

Then I tried to style the border-bottom of #nav-menu, but I again faced two problems:

1. Like the first time, I couldn't limit where the hover / active effect on the line begins and end.
2. #nav-menu is the container of my buttons, it means that when I hover or active on one of them, I can't affect their parent, in our case #nav-menu (Stack Overflow). And since I'm allowed to use only HTML and CSS, this second method can't be used.

Here is my code:

#nav-menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.nav-button {
  color: black;
  font-size: 18px;
  padding-top: 16px;
  text-decoration: none;
  cursor: pointer;
}

.nav-button:hover {
  color: #0065FC;
}

<nav id="nav-menu">
  <a >Accommodations</a>
  <a >Activities</a>
</nav>

I really thank in advance anybody who will be kind enough to try to help me :D.

CodePudding user response：

You have to add flex: 1 to get full width for .nav-button

#nav-menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

.nav-button {
  color: black;
  font-size: 18px;
  padding: 16px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid #f2f2f2;
  flex: 1;
  text-align: center
}

.nav-button:hover {
  color: #0065FC;
  border-bottom: 2px solid #3465fc;
}

<nav id="nav-menu">
  <a >Accommodations</a>
  <a >Activities</a>
</nav>