Html 我在css中遇到了一个问题，它可以'；在菜单栏中移动不顺畅？

我在CSS中有问题，它不能在菜单栏中顺利移动，这个链接中的菜单可以有人帮助我谢谢

这里是链接

我尝试了这个，但没有任何效果：

.div-move{
   -webkit-transition: width 1s ease-in-out;
   -moz-transition: width 1s ease-in-out;
   -o-transition: width 1s ease-in-out;
   transition: width 1s ease-in-out;
}

---

您希望转换为“自动”值，这是问题之一

.notification-bar:hover .text-header-move{
    width:auto;
}

看看这把小提琴：

---

我更新了小提琴以使用“最大宽度”，我认为这是比固定宽度更好的解决方案。

您不能转换为宽度：自动，但使用“最大宽度”会自动使用文本大小。只需确保：悬停宽度比您使用的文本长，这样它就会全部显示出来。我还建议在hover类和regular类上都使用一个转换，这样当鼠标离开菜单时也会有一个转换。尝试更改这些类：

.text-header-move{
    max-width: 0px;
    float: right;
    overflow: hidden;     
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;   
}
.notification-bar:hover .text-header-move{
    max-width:400px;   
    -webkit-transition: max-width 1s ease-in-out;
    -moz-transition: max-width 1s ease-in-out;
    -o-transition: max-width 1s ease-in-out;
    transition: max-width 1s ease-in-out;    
}

---

你的链接不工作抱歉，这是链接