我对 CSS 很陌生。我正在尝试在菜单上的图标下悬停显示文本。图标没问题，当我将其中一个悬停时，文本（最初隐藏）会正确显示，但所有其他图标都会向下移动。我想知道是否有人可以帮助我。
HTML：
<div class="hmenu" style="top: 1580px;">
<ul class="hmenu">
<li><a class="hmenu-icon icon-heart-empty" href="#"><p class="texto">what I love</p></a></li>
<li><a class="hmenu-icon icon-map-2" href="#"><p class="texto">my skills</p></a></li>
<li><a class="hmenu-icon icon-monitor" href="#"><p class="texto">my tools</p></a></li>
</ul>
</div>
CSS：
.hmenu{position: absolute;list-style:none;
top: 270px;
left: 50%;
margin-left: -580px;
text-align:center;
font-family: 'lobster', 'Arial';
font-size: 16px;
width:1120px;
}
.hmenu li{display:inline; padding: 0px 0px;}
.hmenu a{text-decoration: none; display:inline-block;color: #29ab99;}
.texto {display:none;}
.hmenu a:hover {text-decoration: none; display:inline-block; color: #fd5200;}
.hmenu a:hover .texto {display:block;}
我搜索了很多，找不到答案。谢谢