Html 试图通过转换将菜单项隐藏在屏幕外，但它们却崩溃了？

当我想用CSS转换将菜单项隐藏在屏幕外时，菜单项会下拉

我尝试在列表项上使用

display:none

，并保留菜单文本，然后在悬停时尝试取消设置以回调，但这些项不会返回

CSS

HTML

菜单

---

我的目标是只显示菜单文本，当它悬停在菜单文本上时，将其伸出。

您可以使用

ul

上的

空白：nowrap

来停止

li

元素的包装

nav{
填充：2px；
边界半径：7px；
背景色：#800020；
过渡：边距左1秒；
左缘：90%；
}
导航：悬停{
左边距：275px；
}
导航>ul{
空白：nowrap；
}
导航>ul li{
颜色：米色；
显示：内联；
列表样式类型：无；
}
#菜单{
颜色：黑色；
右边填充：25px；
}

菜单

您可以使用

ul

上的

空白：nowrap

来停止

li

元素的包装

nav{
填充：2px；
边界半径：7px；
背景色：#800020；
过渡：边距左1秒；
左缘：90%；
}
导航：悬停{
左边距：275px；
}
导航>ul{
空白：nowrap；
}
导航>ul li{
颜色：米色；
显示：内联；
列表样式类型：无；
}
#菜单{
颜色：黑色；
右边填充：25px；
}

菜单

谢谢！我将其添加到导航选择器中，然后将

overflow:hidden

添加到导航选择器中，然后将

#menu

的padding增加了5，以隐藏其余文本。谢谢！我将其添加到导航选择器中，然后将

overflow:hidden

添加到导航选择器中，然后将

#menu

的padding增加了5以隐藏其余文本，就是这样。

nav {
    padding: 2px;
    border-radius: 7px;
    background-color: #800020;
    transition: margin-left 1s;
    margin-left: 90%;
}

nav:hover {
    margin-left: 275px;
}

nav > ul li {
    color: beige;
    display: inline;
    list-style-type: none;
}

#menu {
    color: black;
    padding-right: 25px;
}

<nav>
    <ul>
        <li id="menu"><b>MENU</b></li>
        <li><a href="index.html#home">Home</a></li>
        <li><a href="index.html#about">About</a></li>
        <li><a href="index.html#projects">Projects</a></li>
        <li><a href="index.html#experience">Experience</a></li>
        <li><a href="index.html#contact">Contact</a></li>
    </ul>
</nav>