管理固定侧边栏和滚动溢出导致不显示水平子菜单的问题

如何解决管理固定侧边栏和滚动溢出导致不显示水平子菜单的问题

我使用 Javascript 开发了一个解决方案，但是我找不到任何使用 css 的解决方案。因为，侧边栏修复导致单击项目时子菜单消失。任何 css 解决方案都会有所帮助。谢谢...

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("top-nav").style.top = "0";
    } else {
        document.getElementById("top-nav").style.top = "-60px";
    }
    prevScrollpos = currentScrollPos;
}



function highlightCurrent() {
    const curPage = document.URL;
    const links = document.getElementsByTagName('a');
    for (let link of links) {
        if (link.href === curPage) {
            link.classList.add("currentLink");
        }
    }
}

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        highlightCurrent()
    }
};


let getSiblings = function (x) {
    var siblings = [];
    var sibling = x.parentNode.firstChild;

    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== x) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling
    }

    return siblings;

};

const sub_menu = document.querySelectorAll(".sub-menu");
sub_menu.forEach(function (i){
    i.parentElement.addEventListener("click",function (e){
        getSiblings(i.parentElement).forEach(function (j){
            j.classList.remove("active")
        })
        i.parentElement.classList.toggle("active")

        if (innerHeight < 250) {
            if (i.clientHeight < innerHeight) {
                if (e.clientY < i.clientHeight/2) {
                    i.style = "";
                    i.style.top = "0";
                } else if (innerHeight - i.clientHeight/2 > e.clientY) {
                    i.style = "";
                    i.style.top = e.clientY + "px";
                    i.style.transform = "translateY(-50%)";

                } else {
                    i.style = "";
                    i.style.bottom = "0";
                }
                i.style.maxHeight = innerHeight+"px";

            } else {
                i.style = "";
                i.style.maxHeight = innerHeight+"px";
                i.style.top = "0";
            }


        } else {
            if (e.clientY < 125) {
                i.style = "";
                i.style.top = "0";
            } else if (innerHeight - 125 > e.clientY) {
                i.style = "";
                i.style.top = e.clientY + "px";
                i.style.transform = "translateY(-50%)";

            } else {
                i.style = "";
                i.style.bottom = "0";
            }
            i.style.maxHeight = "250px";
        }


    })

})

/* text settings */

.text-center {
    text-align: center;
}

.text-xs {
    font-size: 0.85rem;
}

.text-sm {
    font-size: 1.2rem;
}

.text-md {
    font-size: 1.6rem;
}

.text-lg {
    font-size: 2rem;
}

.text-xl {
    font-size: 2.5rem;
}


/* btn settings */

.rd {
    border-radius: 1rem;
}

.rd-bottomm {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.rd-top {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.rd-left {
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
}

.rd-right {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.pd {
    padding: .5rem .9rem;
}

.bg-efl {
    background-color: #7B5AF2;
}
.bg-white {
    background-color: #f0f0f6;
}
.bg-blue {
    background-color: rgb(99,158,247);
}

* {
    margin: 0;
    padding: 0;
    Box-sizing: border-Box;
    list-style: none;
    text-decoration: none;
}

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

html {
    font-size: 10px;
}

@font-face {
    src: url(../fonts/PatrickHand-Regular.ttf);
    font-family: ns-regular;
}

body {
    display: flex;
    flex-direction: row;
    font-size: 1.6rem;
    font-family: ns-regular !important;
    letter-spacing: 2px;
}

.top-left {
    position: relative;
    display: flex;
    align-items: center;
    width: 40px;
    height: 60px;
}

.toggle-cls {
    position: relative;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    left: 10px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 60px;
}

#toggle::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background: rgb(228,229,238);
    transform: translateY(-5px);
    transition: 0.4s;
}

#toggle::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background: rgb(228,238);
    transform: translateY(5px);
    transition: 0.4s;
}

#toggle.active::before {
    transform: translateY(0px) rotate(45deg);
}

#toggle.active::after {
    transform: translateY(0) rotate(-45deg);
}


/* left-column codes */

.left-column {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    left: -100px;
    width: 100px;
    max-height: calc(100vh - 60px);
    top: 60px;
    font-size: 1.2rem;
    z-index: 10;
    overflow: auto;
}

.left-column.active {
    left: 0
}

.left-column::-webkit-scrollbar {
    width: 0;
}

.items-logo {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    height: 100vh;
    width: 100px;
    z-index: 8;
}

.items-left {
    height: 80px;
    width: 100%;
    position: relative;
}

.items-left a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 100%;
    color: rgb(255,255,255);
}

.item-img {
    width: 25px;
    height: 21px;
}

.item-text {
    margin-top: 8px;
}


/* right-column codes */

.right-column {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 9;
    margin-left: 0;
    width: 100vw;
    min-height: 100vh;
}

.right-column.active {
    margin-left: 100px;
}


/* navigation codes */

#top-nav {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    height: 60px;
    width: 100%;
    transition: top 0.5s;
}

#top-nav.active {
    width: calc(100% - 100px);
}

.sub-menu {
    display: none;
}

.items-left.active .sub-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    width: 150px;

    left: 100px;
    overflow: auto;
}

.sub-menu::-webkit-scrollbar {
    width: 0;
}

.items-left.active .arrow-right {
    display: block;
}

.items-left:hover {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: rgb(99,247);
}

.items-left.active {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: rgb(99,247);
}

.items-left > .currentLink {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    background-color: #8f74f3;
    color: rgb(255,255);
    pointer-events: none;
}

.items-left .a-sub {
    pointer-events: none;
}

.sub-menu li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    max-height: 50px;
    border-radius: 10px;
    background-color: #7B5AF2;
    border-bottom: 2.5px solid rgb(99,247);
    border-left: 5px solid rgb(99,247);
    border-right: 5px solid rgb(99,247);
    border-top: 2.5px solid rgb(99,247);
}

.sub-menu li:first-child {
    border-top: 5px solid rgb(99,247);
}

.sub-menu li:last-child {
    border-bottom: 5px solid rgb(99,247);
}

.sub-menu li a {

    width: 150px;
    max-height: 50px;
    color: rgb(255,255);
}

.sub-menu li:hover {
    background-color: #633bf5;
}

.top-right {
    position: relative;
    display: flex;
    align-items: center;
    width: 120px;
    height: 60px;
}

.top-right-item {
    position: relative;
    display: flex;
    width: 40px;
    height: 60px;
}

.noti-num {
    position: absolute;
    width: 17px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: .5px;
    top: 8px;
    left: 23px;
}

.prfl-img {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 18px;
    left: 8px;
    z-index: 11;
    clip-path: circle(50%);
}


/* content codes */

.content {
    margin: 80px 10px 5px 10px;
    color: hsl(240,2%,11%);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.block {
    display: flex;
    border-radius: 10px;
    width: 30%;
    max-width: 620px;
    margin: 0 0 20px 0;
    height: 400px;
    background-color: rgb(233,225,250);
    overflow: hidden;
}


.block::-webkit-scrollbar {
    width: 5px;
}

.block::-webkit-scrollbar-track {
    background: rgb(217,211,240);
    border-radius: 5px;
}

.block::-webkit-scrollbar-thumb {
    background-color: rgb(32,32,32);
    border-radius: 5px;
    border: none
}

@media screen and (max-width: 1100px) {
    .block {
        width: 45%;
    }

    .content {
        margin: 80px 5px 10px 5px;
    }
}

@media screen and (max-width: 800px) {
    .block {
        width: 97%;
        max-width: 520px;
    }

    .content {
        margin: 80px 5px 10px 5px;
    }
}

@media screen and (max-width: 520px) {
    .block {
        width: 97%;
    }

    .content {
        margin: 80px 5px 10px 5px;
    }
}


/* footer */

.footer {
    color: rgb(255,255);
    text-align: justify;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
}

<!DOCTYPE html>
<html lang="tr">

<head>

    <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">




</head>

<body class="bg-white">
<div id="items-logo" class="items-logo bg-efl">
    <img class="img-logo" src="icons/logo-frame.svg" alt="logo">
</div>


<div id="left-column" class="left-column bg-efl">
    <div class="items-left">
        <a href="">
            <img class="item-img" src="icons/home.svg" alt="">
            <p class="item-text">Home</p>
        </a>
    </div>
    <div class="items-left">
        <a href="#" class="a-sub">
            <img class="item-img" src="icons/journals.svg" alt="">
            <p class="item-text">Journals</p>
        </a>
        <ul class="sub-menu bg-blue">

            <li><a href="">Link0</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link2</a></li>



        </ul>
    </div>
    <div class="items-left">
        <a href="#" class="a-sub">
            <img class="item-img" src="icons/about.svg" alt="" style="width: 30px;height: 25px">
            <p class="item-text">About</p>
        </a>

        <ul class="sub-menu bg-blue">
            <li><a href="">Link0</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link2</a></li>

        </ul>
    </div>
    <div class="items-left">
        <a href="#" class="a-sub">
            <img class="item-img" src="icons/contact.svg" alt="">
            <p class="item-text">Contact</p>
        </a>


        <ul class="sub-menu bg-blue">

            <li><a href="">Link1</a></li>

        </ul>

    </div>
</div>


<div id="right-column" class="right-column">
    <nav id="top-nav" class="bg-efl">
        <div class="top-left">
            <div id="toggle" class="toggle-cls"></div>
        </div>
        <div class="top-right">
            <div class="top-right-item">
                <img src="icons/lang-frame.svg" alt="lang">
            </div>
            <div class="top-right-item">
                <img src="icons/notification-frame.svg" alt="notify">
                <div class="noti-num">
                    <span class="text-xs">3</span>
                </div>
                <div class="top-right-item">
                    <img src="icons/profile-frame.svg" alt="prfl-img">
                    <img class="prfl-img" src="media/self.jpeg" alt="">
                </div>
            </div>
        </div>
    </nav>


    <div class="content text-md">
        <div class="block">
            Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aut dicta dignissimos dolore excepturi itaque
            molestiae nesciunt quod sint vel veritatis? Ducimus,enim eos error est et eum eveniet ipsa nemo optio quas
            quod suscipit,ullam. Ab adipisci aperiam architecto doloremque earum eligendi enim esse est eveniet in
            labore minus non obcaecati,ratione,reiciendis repudiandae sit totam voluptas? Eligendi explicabo fuga quam
            quia reprehenderit? A,commodi consectetur consequuntur dolore ea eius eligendi enim eum ex facere impedit
            ipsam itaque laborum magnam,minima natus nemo nihil nostrum nulla perferendis quia quis quo recusandae
            repellendus rerum sit tempora tempore temporibus velit voluptate voluptatibus.
        </div>
        <div class="block">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid reiciendis fuga nostrum eaque expedita est,facere laborum ab aut totam,excepturi voluptas provident molestias quo. Ratione nisi expedita deserunt,fugit ducimus quod,reprehenderit minus
            ipsa quidem nemo voluptate eius obcaecati ea error repudiandae dolores minima nam unde pariatur? Blanditiis
            totam nostrum in consectetur facere nam amet,id quidem ipsum dolor praesentium,quisquam eius sit
            repudiandae deleniti non commodi
            temporibus. Praesentium debitis magni illum aliquam aliquid,delectus iste reprehenderit. Dolores porro
            rerum reprehenderit consequuntur repellendus voluptate reiciendis,officia quae vero id quod ea aliquid
            iusto facilis corporis impedit.
            Numquam,quisquam perspiciatis?
        </div>
        <div class="block">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid reiciendis fuga nostrum eaque expedita est,quisquam perspiciatis?
        </div>


    </div>
    <div class="footer bg-efl">
        FOOTER
    </div>

</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {

        document.onclick = function (e) {

            if (e.target.id !== "items-logo" && e.target.id !== "left-column" && e.target.id !== "toggle" && !$(e.target).parents().hasClass('items-left') && !$(e.target).hasClass('items-left')) {
                $("#left-column").removeClass("active");
                $("#toggle").removeClass("active");
                $(".items-left").removeClass("active");
                $("#right-column").removeClass("active");
                $("#top-nav").removeClass("active");

                $("#items-logo").css("display","none");


            }
            if (e.target.id === "toggle" && !$(e.target).hasClass('active')) {

                $("#items-logo").css("display","none");

            }
        }

        $("#toggle").click(function () {
            $(this).siblings().removeClass("active");
            $(this).toggleClass("active");
            $("#left-column").toggleClass("active");
            $("#right-column").toggleClass("active");
            $("#top-nav").toggleClass("active");
            $("#items-logo").css("display","flex")


        })

    });


</script>




</body>

</html>

我使用 Javascript 开发了上述解决方案，但我找不到任何使用 css 的解决方案。因为，侧边栏修复导致单击项目时子菜单消失。任何 css 解决方案都会有所帮助。谢谢...