顶部导航栏 hover 下划线效果

Question

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 class="nav-button">Accommodations</a> <a class="nav-button">Activities</a> </nav>

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

Answer 1

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 class="nav-button">Accommodations</a> <a class="nav-button">Activities</a> </nav>