Html Css，菜单项高亮显示问题

我刚开始学习html和css，我对这个菜单有一个问题。
当您将鼠标悬停在某个元素上时，它应该通过扩展填充和更改边框颜色（在代码中，这是以一种奇怪的方式制作的，但这是因为最初它的标题写在“li”中）来点亮该元素，但当您将鼠标悬停在某个元素上时，其他4个元素由于某种原因会熄灭。
我已经试着在边距、垫子和位置上乱搞了

nav#主机列表{
列表样式类型：无；
边际：0px；
填充：0px；
文本对齐：居中；
}
li.navoptions{
宽度：103px；
高度：93px；
填充：0px；
边界半径：4px；
左边距：5px；
右边距：5px；
位置：相对位置；
顶部：4px；
颜色：黑色；
文本对齐：居中；
背景色：红色；
显示：内联块；
}
.导航选项：悬停{
背景色：白色；
填充：2px；
位置：相对位置；
顶部：2个；
左边距：3倍；
右边距：3倍；
}
.导航选项组{
宽度：100px；
高度：90px；
边界半径：4px；
左边距：自动；
右边距：自动；
位置：相对位置；
顶部：1.5px；
背景颜色：黄色；
背景尺寸：100px 90px；
背景重复：无重复；
文本缩进：-999999像素；
}
#导航1{
背景图像：url（“../images/nav1.png”）；
}
#导航2{
背景图像：url（“../images/nav2.png”）；
}
#导航3{
背景图像：url（“../images/nav3.png”）；
}
#导航4{
背景图像：url（“../images/nav4.png”）；
}
#导航5{
背景图像：url（“../images/nav5.png”）；
}

您在找这个吗？

给我一些信息，我会更新我的答案


.navoptions:悬停{
背景色：白色；
边框：1px纯红；
填充：50px；
}
.导航选项{
宽度：100px；
高度：90px；
浮动：左；
边界半径：4px；
左边距：5px；
右边距：5px；
位置：相对位置；
顶部：1.5px；
边框：1px纯黑；
背景颜色：黄色；
背景尺寸：100px 90px；
背景重复：无重复；
文本缩进：-999999像素；
}
#导航1{
背景图像：url（“../images/nav1.png”）；
}
#导航2{
背景图像：url（“../images/nav2.png”）；
}
#导航3{
背景图像：url（“../images/nav3.png”）；
}
#导航4{
背景图像：url（“../images/nav4.png”）；
}
#导航5{
背景图像：url（“../images/nav5.png”）；
}




这是可行的，但我需要的是，当您将鼠标悬停在某个项目上时，它会变得更大，但在我的代码中，当其中一个项目被选中时，另一个项目会掉落bigger@NanoGigante你说的更大是什么意思？更多的填充物？因为当你增加一个按钮的填充时，它下面的其余部分当然会掉下来（只有在使用
位置：fixed
时才会掉下来）@nanoggigante检查我的更新答案显然我复制的讨论的解决方案是有效的，顺便说一句，这个想法是当你在一个元素上悬停时，它的边框（本例中的填充）会变得更大。