悬停文本和底部

【问题标题】：Hovering Texts and bottoms悬停文本和底部
【发布时间】：2021-04-17 18:27:32
【问题描述】：

我的主题导航栏有问题，当只有一个词，如 home 或 contact，你将鼠标放在它上面，以正确​​的方式悬停世界，但是当我像主页一样向它添加一个词时悬停也会在主要单词下方显示第二个单词，并且无法正常工作。 这是 HTML 代码：

    <li>
    <a href="#" data-hover="ABOUT US" >ABOUT US</a> </li>

这是 CSS 脚本：

@media (min-width:768px) {
    .menu > li > a::before,
    .menu .current > a::before {
        position: absolute;
        top: 25px;
        left: 20px;
        overflow: hidden;
        max-width: 0;
        color: rgb(34,171,166);
        content: attr(data-hover);
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
    .menu > li > a:hover::before,
    .menu > li > a:focus::before,
    .menu > .active > a {
        max-width: 100%;
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
}

【问题讨论】：

• 请将您的代码放在文本中而不是图像中。
• 关于我们