css left заставляет элементы показываться как встроенные

Question

Я создаю кнопку «Еще» для панели навигации. Код берет несколько существующих кнопок и добавляет их к неотображаемому элементу div, который становится видимым, когда мышь наводит курсор на кнопку. Кнопка является последней в ряду. Div выскальзывает за пределы экрана, поэтому я вставил в CSS правило right:0px; / left:0px (в зависимости от направления языка). Но в тот момент, когда это произошло, все элементы li (кнопки, которые были добавлены в div) появляются рядом друг с другом, а не один под другим.

Структура HTML:

<div id="toolbarcontrol">
<nav>
<ul id="menuList">
<li>Button</li>
<li>Button</li>
<li>Button</li>
//this is where the code inserts the new button.
</ul>
</nav>
</div>

Код jquery:

   function MoreButton() { //Specific Buttons appending
        window.jQuery && (clearInterval(myMoreButtonInterval), jQuery(window.parent.document).ready(function() {
            //Getting buttons to append.
        var buttons = $('#MoreButton').attr("data-buttons").split(",");
            //Getting necessary CSS.
        var styleText = $('style').html();
        var backgroundcolor = $('#toolbarControl').css("background-color"); //Getting the background color from the menu bar.
            //Changing CSS based on language.
            if (document.getElementsByTagName("html")[0].getAttribute("dir") == "RTL") {
                styleText += '\n' + '#toolbarmorebutton .nav-item {display:inherit;}' + '\n' + '#itemMore:hover > #toolbarmorebutton{display:block !important; background-color:' + backgroundcolor + ' !important;}' + '\n' + '#toolbarmorebutton {position:fixed; left:0px;}';
            } else {
                styleText += '\n' + '#toolbarmorebutton .nav-item {display:inherit;}' + '\n' + '#itemMore:hover > #toolbarmorebutton{display:block !important; background-color:' + backgroundcolor + ' !important;}' + '\n' + '#toolbarmorebutton {position:fixed; right:0px;}';
            }
            //Applying CSS.
        $('style').html(styleText); //Applying style.
            //Adding new button and div (language based).
            var moretext;
        //Code that selects the language goes here, it works ok but is long so I cut it out.
        $("#menuList").append('<li id="itemMore" role="menuitem" class="nav-item" tabindex="-1"><p title="More options" class="link color-s1" id="lnkMore" tabindex="-1">' + moretext + '</p><div id="toolbarmorebutton" style="display: none;" title="More options"></div></li>');
            //Adding buttons if they were chosen.
        if (buttons.includes('Sign in')) {
        $('#itemSignIn').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Folder')) {
        $('#itemFolder').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Preferences')) {
        $('#itemPrefs').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Language')) {
        $('#itemLanguages').appendTo($('#toolbarmorebutton'));
        }
        if (buttons.includes('Help')) {
        $('#itemHelp').appendTo($('#toolbarmorebutton'));
        }
    }))};

    try {
        var myMoreButtonInterval = setInterval("MoreButton()", 500)
    } catch (n) {
        console.log(n)
    }

Как я могу удерживать кнопки одну за другой, но чтобы div не исчезал с экрана?