Navigation hover effect - html

Question

I have been trying to create my first html and css website, but right now I'm stuck in the navigation because I'm trying to do a hover effect in the links, what I want is when you hover a link, a box should appear over a link, this box will have a shadow, can you help me out?
Thank you!!
Here is my nav code atm:
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
css:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000; }
.main-nav li{
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
}
.main-nav li a:link
.main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
transition: background 0.3s ease-in-out;
}
Example of what I want: https://w3layouts.com/preview/?l=/boombox-a-entertainment-category-flat-bootstrap-responsive-template/

Answer 1

Here is a code snippet with your intended behavior:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000;
}
.main-nav li {
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
padding: 4px;
border-radius: 4px;
}
.main-nav li a:link .main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
box-shadow: 4px 4px 4px #000;
transition: background 0.3s ease-in-out;
}
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
I added padding: 4px; and border-radius: 4px; to your .main-nav li a selector and I added box-shadow: 4px 4px 4px #000; to your .main-nav li a:hover, .main-nav li a:active selector. I hope this helps.

Answer 2

Have you something like this?
nav ul li a:hover {
background-color: #333333;
color: #FFFFFF;
box-shadow: 2px 10px 8px #888888;
}