时间戳

首页 > 解决方案 > 试图通过过渡将菜单项隐藏在屏幕外，但它们却倒塌了？

html - 试图通过过渡将菜单项隐藏在屏幕外，但它们却倒塌了？

问题描述

当我想使用 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>

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

标签： htmlcsscss-transitionsnav

解决方案

您可以使用white-space:nowraponul来阻止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>

推荐阅读