Jquery 菜单超出范围 我有一个菜单集中在网站中间，一个过渡被应用到这样一种方式，如果点击其中一个元素，整个菜单以这种形式移动到屏幕的最后左边。但问题是，菜单中的部分单词在到达左端时消失了。需要帮忙吗

JSFIDDLE：

HTML:

<div id="logo" class="logo">
    <img src="http://placehold.it/350x150" />
</div>
<p class="custom-class"><a href="">Go to the main website</a>

</p>
<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>Aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>Bbbbbbb</button>
        </li>
        <li id="item3">
            <button>Cccccccc </button>
        </li>
        <li id="item4">
            <button>Ddddddd </button>
        </li>
        <li id="item5">
            <button>Eeeeeeee Eee. </button>
        </li>
        <li id="item6">
            <button>Fffffffff </button>
        </li>
        <li id="item7">
            <button>Ggggggggg </button>
        </li>
    </ul>
</div>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

html {
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

.custom-class {
    text-align: right;
    margin-top: -130px;
    margin-right: 20px;
}

a {
    color: #000000;
    text-decoration: none;
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border-style: none;
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

.logo {
    text-align: center;
    margin-top: 40px;
}

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align: center;
    border-style: none;
}

.menu li {
    position: relative;
    top: 90px;
    left: 0px;
}

#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
}

#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
}

#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
}

#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
}

#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
}

#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    ;
}

#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
}

#item1>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item2>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item3>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item4>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item5>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item6>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item7>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

.permahover li {
    opacity: 1;
    left: -46%;
}

.headlines li {
    font-size: 1.5em;
    color: #000000;
    transition: all 0.5s;
    cursor: pointer;
}

.headlines:hover li, .headlines.active li {
        /* PARENT HOVER */
    opacity: 0.4;
    cursor: pointer;
        /* Dim all */;
}

.headlines li:hover, .headlines li.active {
        /* SINGLE HOVER */
    opacity: 1;
        /* Max one */
    color: #000000;
    cursor: pointer;
}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }

    100% {
        -webkit-filter: grayscale(0%);
    };
}

@keyframes colorize {
    0% {
        filter: grayscale(100%);
    }

    100% {
        filter: grayscale(0%);
    };
}

$(".menu").on("click", function() {
    $(".menu").addClass('permahover');
});


var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

JQUERY:

<div id="logo" class="logo">
    <img src="http://placehold.it/350x150" />
</div>
<p class="custom-class"><a href="">Go to the main website</a>

</p>
<div id="menu" class="menu">
    <ul class="headlines">
        <li id="item1">
            <button>Aaaaaaaa</button>
        </li>
        <li id="item2">
            <button>Bbbbbbb</button>
        </li>
        <li id="item3">
            <button>Cccccccc </button>
        </li>
        <li id="item4">
            <button>Ddddddd </button>
        </li>
        <li id="item5">
            <button>Eeeeeeee Eee. </button>
        </li>
        <li id="item6">
            <button>Fffffffff </button>
        </li>
        <li id="item7">
            <button>Ggggggggg </button>
        </li>
    </ul>
</div>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

html {
    background-color: #FFFFFF;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    margin-top: 1.3em;
}

.custom-class {
    text-align: right;
    margin-top: -130px;
    margin-right: 20px;
}

a {
    color: #000000;
    text-decoration: none;
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
    background: transparent;
    border-style: none;
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}

.logo {
    text-align: center;
    margin-top: 40px;
}

li {
    list-style-type: none;
    font-size: 1.5em;
    padding-top: 8px;
    text-align: center;
    border-style: none;
}

.menu li {
    position: relative;
    top: 90px;
    left: 0px;
}

#item7 {
    transition: opacity .8s, left .8s ease-out;
    -moz-transition: opacity .8s, left .8s ease-out;
    -webkit-transition: opacity .8s, left .8s ease-out;
    -o-transition: opacity .8s, left .8s ease-out;
}

#item6 {
    transition: opacity 1s, left 1s ease-out;
    -moz-transition: opacity 1s, left 1s ease-out;
    -webkit-transition: opacity 1s, left 1s ease-out;
    -o-transition: opacity 1s, left 1s ease-out;
}

#item5 {
    transition: opacity 1.2s, left 1.2s ease-out;
    -moz-transition: opacity 1.2s, left 1.2s ease-out;
    -webkit-transition: opacity 1.2s, left 1.2s ease-out;
    -o-transition: opacity 1.2s, left 1.2s ease-out;
}

#item4 {
    transition: opacity 1.4s, left 1.4s ease-out;
    -moz-transition: opacity 1.4s, left 1.4s ease-out;
    -webkit-transition: opacity 1.4s, left 1.4s ease-out;
    -o-transition: opacity 1.4s, left 1.4s ease-out;
}

#item3 {
    transition: opacity 1.6s, left 1.6s ease-out;
    -moz-transition: opacity 1.6s, left 1.6s ease-out;
    -webkit-transition: opacity 1.6s, left 1.6s ease-out;
    -o-transition: opacity 1.6s, left 1.6s ease-out;
}

#item2 {
    transition: opacity 1.8s, left 1.8s ease-out;
    -moz-transition: opacity 1.8s, left 1.8s ease-out;
    -webkit-transition: opacity 1.8s, left 1.8s ease-out;
    -o-transition: opacity 1.8s, left 1.8s ease-out;
    ;
}

#item1 {
    transition: opacity 2s, left 2s ease-out;
    -moz-transition: opacity 2s, left 2s ease-out;
    -webkit-transition: opacity 2s, left 2s ease-out;
    -o-transition: opacity 2s, left 2s ease-out;
}

#item1>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item2>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item3>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item4>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item5>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item6>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

#item7>button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
}

.permahover li {
    opacity: 1;
    left: -46%;
}

.headlines li {
    font-size: 1.5em;
    color: #000000;
    transition: all 0.5s;
    cursor: pointer;
}

.headlines:hover li, .headlines.active li {
        /* PARENT HOVER */
    opacity: 0.4;
    cursor: pointer;
        /* Dim all */;
}

.headlines li:hover, .headlines li.active {
        /* SINGLE HOVER */
    opacity: 1;
        /* Max one */
    color: #000000;
    cursor: pointer;
}

@-webkit-keyframes colorize {
    0% {
        -webkit-filter: grayscale(100%);
    }

    100% {
        -webkit-filter: grayscale(0%);
    };
}

@keyframes colorize {
    0% {
        filter: grayscale(100%);
    }

    100% {
        filter: grayscale(0%);
    };
}

$(".menu").on("click", function() {
    $(".menu").addClass('permahover');
});


var $li = $('.headlines li').click(function() {
    var state = !$(this).hasClass('active');
    $(this).parent().toggleClass('active', state);

    $li.removeClass('active');
    $(this).toggleClass('active', state);
});

---

在

.permahover li

中更改

左侧的百分比

例如，
40%
。在这里查看：
在
中。permahover li
更改
左侧的百分比

例如，
40%
。在这里查看：
而不是使用
左：-46%
您应该只使用
文本对齐：左

列表项宽度为其父项的100%。如果设置
left:-46%
则只更改元素的最左侧位置（宽度不会更改）。文本仍将居中（基于css），因此文本的位置取决于您在那里获得的文本数量。
而不是使用
左：-46%
您应该只使用
文本对齐：左

列表项宽度为其父项的100%。如果设置
left:-46%
则只更改元素的最左侧位置（宽度不会更改）。文本仍将居中（基于css），因此文本的位置取决于您在其中获得的文本数量。
将单击功能更改为：

js:

选中此项，将根据列表中的内容滚动。
将您的单击功能更改为：

js:

选中此项，此项将根据列表中的内容滚动。
嘿，伙计，是randy他们因为删除了几个问题而阻止了我的帐户。谢谢，没问题，我很高兴：）但问题是菜单中的部分单词在到达左端时消失了。用你的方法，问题仍然存在，请检查
eeee的对齐方式。
是的，你是正确的，很抱歉我的错误。但我认为这对他有帮助，哈哈。如果没有，请告诉我。嘿，伙计，是兰迪，他们因为删除了几个问题而屏蔽了我的帐户。谢谢，没问题，我很高兴：）但问题是菜单中的部分单词在到达左端时消失了。用你的方法，问题仍然存在，请检查
eeee的对齐方式。
是的，你是正确的，很抱歉我的错误。但我认为这对他有帮助，哈哈。如果没有，请告诉我。