Html 导航悬停效果

我一直在尝试创建我的第一个

html

和

css

网站，但现在我被困在导航中，因为我试图在链接中实现悬停效果，我想要的是当你悬停链接时，链接上方会出现一个框，这个框会有阴影，你能帮我吗

谢谢

这是我的自动取款机导航码：

<div class="row">
        <nav class="main-nav nav-js">    
        <img class="logo" src="" alt="">
          <ul>
            <li><a href="#about_us">ABOUT US</a></li>
            <li><a href="#search">SEARCH</a></li>
            <li><a href="#top_artists">TOP ARTISTS</a></li>
            <li><a href="#contacts">CONTACTS</a></li>
          </ul>
        </nav>    
        </div> 

---

我想要的例子：

你有这样的东西吗

nav ul li a:hover {
  background-color: #333333;
  color: #FFFFFF;
  box-shadow: 2px 10px 8px #888888;
}

---

下面是一个包含您预期行为的代码片段：

.main导航{
背景色：#2c3136；
宽度：100%；
高度：70像素；
文本对齐：居中；
盒影：0.5万；
}
主导航李先生{
显示：内联；
列表样式：无；
}
.主导航李a{
文字装饰：无；
颜色：白色；
右边距：50px；
字体大小：90%；
字体大小：粗体；
填充：4px；
边界半径：4px；
}
主导航李a:链接主导航李a:已访问{
填充：80；
颜色：#fff；
背景：透明；
过渡：背景0.3s缓进缓出；
}
主导航李a：悬停，
.主导航李a：激活{
颜色：#fff；
背景#5a5a；
盒影：4px4px4p000；
过渡：背景0.3s缓进缓出；
}

在此处插入实际代码，而不仅仅是图片。否则很难有帮助。欢迎来到堆栈溢出！寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。看到了吗，但是在这里你在哪里设置框的宽度和高度？你可以在文本周围添加填充物来填充它周围的区域。非常感谢你，伙计！这有帮助！

nav ul li a:hover {
  background-color: #333333;
  color: #FFFFFF;
  box-shadow: 2px 10px 8px #888888;
}