Question

我尝试创建出现在屏幕左侧的菜单栏。它弯曲整个高度。它有特定的宽度。它是 <ul> 并且它还包括子列表。我已经尝试在点击它时出现子列表，但它比列表更大。我编码

 .ul{
overflow: auto;
}

但它没有显示所有子列表。子列表的底部项目不会出现。我怎么解决这个问题。请帮我。这是我的代码 html

<div class="top">
                <button class="xbbutton">
                <svg  style="background-color: black;" width="87" height="87">
                    <text x="32" y="54" fill="white">XB</text>
                </svg>
                </button>
                <ul class="popmenu">
                    <li id="mnpg">Ana sayfa</li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">Haberler</a></li>
                    <li><a href="tips.html" rel="nofollow, noreferrer">İpuçları</a></li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">HTML Charackter Entities kütüphanesi</a></li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">Güvenlik ipuçları</a></li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">Okuyacak bir şeyler</a></li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">API hileleri</a></li>
                    <li><a href="hfy.html" rel="nofollow, noreferrer">İletişim</a></li>
                    <li class="subit">Dersler
                        <ul class="subli">
                            <li><a href="hfy.html" rel="nofollow, noreferrer">HTML</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">XML</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">CSS</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">JavaScript</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">JQuery</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">PHP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">PowerShell</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">C</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">C++</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">SQL</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">SVG Special</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">Canvas Special</a></li>
                        </ul>
                    </li>
                    <li class="subit">...nedir&#59;
                        <ul class="subli">
                            <li><a href="hfy.html" rel="nofollow, noreferrer">HTTP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">HTTPS</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">XMLHTTP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">FTP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">SMTP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">TCP</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">SSL</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">TLS</a></li>
                            <li><a href="hfy.html" rel="nofollow, noreferrer">MTA</a></li>
                        </ul>
                    </li>
                    <li id="me">Furkan ERBEY</li>
                </ul>
            <div translate="no" class="big-head">
                <span id="xbrwsr">XBrowser</span>
                <span id="extsbl">Extensible Browser</span>
            </div>
        </div>

css

.top{
    position: fixed;
    top: 0;
    font-family: lucida bright;
    display: flex;
    border-bottom: 4px solid black;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 88px;
    min-height: 88px;
    z-index: 1;
}
.big-head{            
    margin-left: 1px;
    flex: 1;
    text-align: center;
    flex-direction: column;
    display: flex;
    width: auto;
    height: 88px;
    background-color: black;
}
.big-head #xbrwsr{
    vertical-align: middle;
    font-size: 55px;
    color: white;
}
.big-head #extsbl{
    vertical-align: sub;
    color: white;
}
.xbbutton{
    display: inline-flex;
    flex-direction: column;
    border: none;
    background-color: transparent;
    position: absolute;
    z-index: 1;
    cursor: default;
    margin: 0;
    padding: 0;
    height: 87px;
    width: 87px;
    margin-right: 1px;
}
.popmenu{
    position: absolute;
    height: 100vh;
    width: 250px;
    top: 86px;
    display: none;
    flex-direction: column;
    z-index: 1;
    margin: 0;
    padding: 0;
    color: white;
    background-color: black;
    list-style-type: none;
    overflow-y: auto;
}
.active{
    display: inline-flex;
}
.popmenu a{
    color: white;
    text-decoration: none;
    flex: 1;
    padding: 7px;
    cursor: pointer;
}
.popmenu > li{
    display: flex;
    margin: 0;
}
.popmenu > li:hover:not(#me){
    background-color: white;
    color: black;
    transition: 0.1s;
}
.popmenu li:hover > a{
    background-color: white;
    color: black;
    transition: 0.1s;
}
.subit{
    display: flex;
    flex-direction: column;
    padding: 7px;
    padding-left: 0;
    padding-right: 0;
}
.subli{
    display: none;
    flex-direction: column;
    background-color: black;
    color: white;
    list-style: disc;
}
.subli li a{
    display: flex;
    padding: 7px;
    flex: 1;
}
.subli li:hover > a{
    background-color: white;
    color: black;
}
.subit:hover > .subli{
    display: flex;
}
#me{
    background-color: black;
    color: white;
    padding: 7px;
    cursor: default;
}
#mnpg{
    background-color: white;
    color: black;
    padding: 7px;
}

有点抱歉:-)

Answer 1

 .ul{
   overflow: auto;
 }

是ul一个类

如果不尝试：

 ul{
   overflow: auto;
 }

溢出不会滚动整个内容

1 个答案: