时间戳

首页 > 解决方案 > 高度和溢出规则应用于 ul 后，下拉菜单停止工作

html - 高度和溢出规则应用于 ul 后，下拉菜单停止工作

问题描述

我一直把编码作为一种爱好，我开始认为我没有生意做这个哈哈。话虽如此，对于我的生活，我无法弄清楚为什么一切看起来都很好，直到我在 css 中添加高度和溢出规则以便在可滚动区域内包含一个非常长的下拉列表以使其在移动设备上更加用户友好设备。下面是代码，希望我已经包含了足够多的代码。我还在 html 的头部和 css 中使用 jquery 以使页面响应。我不确定一个或两个是否会影响这一点。在 css 中有相当多的代码，我知道 css 是“最后一个声明获胜”层次结构，但是，在我尝试添加此功能之前，一切都很好。下面是代码：

<body>
    <nav class="nav">
        <img class="logo" src="runlinepros.png">
        <ul class="menu">
            <li class="toggle"><span class="mobiledropdown"></span></li>
            <li class="item home"><a href="#">HOME</a></li>
            <li class="item teams"><a href="#">TEAMS</a></li>
                <ul class="item teamdropdown">
                    <ul class="item teamdropdown aleast">
                        <li class="item teamdropdown aleast team"><font class='divisions'>AL&nbspEAST</font></li>
                        <li class="item teamdropdown aleast team"><a href="#"><img src="orioleslogo.svg" class="teamlogo">&nbspBaltimore Orioles</a></li>
                        <li class="item teamdropdown aleast team"><a href="#"><img src="redsoxlogo.svg" class="teamlogo">&nbspBoston Red Sox</a></li>
                        <li class="item teamdropdown aleast team"><a href="#"><img src="yankeeslogo.svg" class="teamlogo">&nbspNew York Yankees</a></li>
                        <li class="item teamdropdown aleast team"><a href="#"><img src="rayslogo.svg" class="teamlogo">&nbspTampa Bay Rays</a></li>
                        <li class="item teamdropdown aleast team"><a href="#"><img src="bluejayslogo.svg" class="teamlogo">&nbspToronto Blue Jays</a></li>
                    </ul>
                    <ul class="item teamdropdown alcentral">
                        <li class="item teamdropdown alcentral team"><font class='divisions'>AL&nbspCENTRAL</font></li>
                        <li class="item teamdropdown alcentral team"><a href="#"><img src="whitesoxlogo.svg" class="teamlogo">&nbspChicago White Sox</a></li>
                        <li class="item teamdropdown alcentral team"><a href="#"><img src="indianslogo.svg" class="teamlogo">&nbspCleveland Indians</a></li>
                        <li class="item teamdropdown alcentral team"><a href="#"><img src="tigerslogo.svg" class="teamlogo">&nbspDetroit Tigers</a></li>
                        <li class="item teamdropdown alcentral team"><a href="#"><img src="royalslogo.svg" class="teamlogo">&nbspKansas City Royals</a></li>
                        <li class="item teamdropdown alcentral team"><a href="#"><img src="twinslogo.svg" class="teamlogo">&nbspMinnesota Twins</a></li>
                    </ul>
                    <ul class="item teamdropdown alwest">
                        <li class="item teamdropdown alwest team"><font class='divisions'>AL&nbspWEST</font></li>
                        <li class="item teamdropdown alwest team"><a href="#"><img src="astroslogo.svg" class="teamlogo">&nbspHouston Astros</a></li>
                        <li class="item teamdropdown alwest team"><a href="#"><img src="angelslogo.svg" class="teamlogo">&nbspLos Angeles Angels</a></li>
                        <li class="item teamdropdown alwest team"><a href="#"><img src="athleticslogo.svg" class="teamlogo">&nbspOakland Athletics</a></li>
                        <li class="item teamdropdown alwest team"><a href="#"><img src="marinerslogo.svg" class="teamlogo">&nbspSeattle Mariners</a></li>
                        <li class="item teamdropdown alwest team"><a href="#"><img src="rangerslogo.svg" class="teamlogo">&nbspTexas Rangers</a></li>
                    </ul>
                    <ul class="item teamdropdown nleast">
                        <li class="item teamdropdown nleast team"><font class='divisions'>NL&nbspEAST</font></li>
                        <li class="item teamdropdown nleast team"><a href="#"><img src="braveslogo.svg" class="teamlogo">&nbspAtlanta Braves</a></li>
                        <li class="item teamdropdown nleast team"><a href="#"><img src="marlinslogo.svg" class="teamlogo">&nbspMiami Marlins</a></li>
                        <li class="item teamdropdown nleast team"><a href="#"><img src="metslogo.svg" class="teamlogo">&nbspNew York Mets</a></li>
                        <li class="item teamdropdown nleast team"><a href="#"><img src="phillieslogo.svg" class="teamlogo">&nbspPhiladelphia Phillies</a></li>
                        <li class="item teamdropdown nleast team"><a href="#"><img src="nationalslogo.svg" class="teamlogo">&nbspWashington&nbspNationals</a></li>
                    </ul>
                    <ul class="item teamdropdown nlcentral">
                        <li class="item teamdropdown nlcentral team"><font class='divisions'>NL&nbspCENTRAL</font></li>
                        <li class="item teamdropdown nlcentral team"><a href="#"><img src="cubslogo.svg" class="teamlogo">&nbspChicago Cubs</a></li>
                        <li class="item teamdropdown nlcentral team"><a href="#"><img src="redslogo.svg" class="teamlogo">&nbspCincinnati Reds</a></li>
                        <li class="item teamdropdown nlcentral team"><a href="#"><img src="brewerslogo.svg" class="teamlogo">&nbspMilwaukee Brewers</a></li>
                        <li class="item teamdropdown nlcentral team"><a href="#"><img src="pirateslogo.svg" class="teamlogo">&nbspPittsburg Pirates</a></li>
                        <li class="item teamdropdown nlcentral team"><a href="#"><img src="cardinalslogo.svg" class="teamlogo">&nbspSt. Louis Cardinals</a></li>
                    </ul>
                    <ul class="item teamdropdown nlwest">
                        <li class="item teamdropdown nlwest team"><font class='divisions'>NL&nbspWEST</font></li>
                        <li class="item teamdropdown nlwest team"><a href="#"><img src="diamondbackslogo.svg" class="teamlogo">&nbspArizona&nbspDiamondbacks</a></li>
                        <li class="item teamdropdown nlwest team"><a href="#"><img src="rockieslogo.svg" class="teamlogo">&nbspColorado Rockies</a></li>
                        <li class="item teamdropdown nlwest team"><a href="#"><img src="dodgerslogo.svg" class="teamlogo">&nbspLos Angeles Dodgers</a></li>
                        <li class="item teamdropdown nlwest team"><a href="#"><img src="padreslogo.svg" class="teamlogo">&nbspSan Diego Padres</a></li>
                        <li class="item teamdropdown nlwest team"><a href="#"><img src="giantslogo.svg" class="teamlogo">&nbspSan Francisco Giants</a></li>
                    </ul>
                </ul>
            <li class="item button"><a href="#">PLAYERS</a></li>
            <li class="item button secondary"><a href="#">PITCHERS</a></li>
        </ul>
    </nav>
    <main>
        <a href="#" style="position: fixed;bottom: 0;"></a>
    </main>
</body>

.menu {
    order: 0;
    float: left;
}

.menu li a {
    display: block;
}

.item.teamdropdown {
    order: 1;
    margin-left: 100px;
    margin-top: -155;
    width: 200px;
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
    background-color: white;
    display: none;
}

.item.teams.active .item.teamdropdown {
    display: block;
}

.item.teamdropdown.aleast, .item.teamdropdown.alcentral, .item.teamdropdown.alwest,
.item.teamdropdown.nleast, .item.teamdropdown.nlcentral, .item.teamdropdown.nlwest {
    margin-left: 0px;
    margin-top: 0px;
}

.item.teamdropdown.aleast.team, .item.teamdropdown.alcentral.team, .item.teamdropdown.alwest.team,
.item.teamdropdown.nleast.team, .item.teamdropdown.nlcentral.team, .item.teamdropdown.nlwest.team {
    width: 200px;
    height: 40px;
    display: block;
    justify-content: center;
}

.item.teamdropdown.aleast.team a, .item.teamdropdown.alcentral.team a, .item.teamdropdown.alwest.team a,
.item.teamdropdown.nleast.team a, .item.teamdropdown.nlcentral.team a, .item.teamdropdown.nlwest.team a {
    display: flex;
    padding-top: 5px;
    width: 180px;
    font-size: 14px;
}

标签： htmljquerycss

解决方案

推荐阅读