尝试通过过渡将菜单项隐藏在屏幕之外，但它们会折叠起来

Question

当我想用CSS过渡将它们隐藏在屏幕之外时，我的菜单项正在下拉。

我尝试在列表项上使用display: none并离开菜单文本，然后在悬停时尝试取消设置以将其回调，但项目不会返回。

.CSS

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;
}

.HTML

<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>

我的目标是只显示菜单文本，当它悬停在菜单上时，让它向外延伸。

Answer 1

您可以使用

ul上的white-space:nowrap来阻止li元素的包装。

nav {
    padding: 2px;
    border-radius: 7px;
    background-color: #800020;
    transition: margin-left 1s;
    margin-left: 90%;
}
nav:hover {
    margin-left: 275px;
}
nav > ul {
  white-space:nowrap;
}
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>