我想創建一個嵌套的下拉菜單，可能會很長，溢出頁面。長期（滾動）下拉菜單的CSS
我想要做的是，當菜單太長時，它會顯示一個滾動條。我正在用overflow: auto這樣做。但是，當我這樣做時，它會捕獲與第一個滾動條所定義的相同「滾動空間」內的任何子菜單。
我也試過overflow: none與:not(:hover)選擇器的各種迭代，但沒有任何我試過似乎工作。
我想要做的是隻在必要時顯示每個級別的滾動條（即子菜單將滾動頁面）。如果有的話，每個子菜單都應該彈出前一個滾動條，就好像它不在那裏一樣。
我想在所有的CSS中這樣做，但我也接受JS解決方案。
我有一個代碼筆顯示這裏的問題： https://codepen.io/mcmurphy510/pen/ZyGLKd
鼠標懸停在項目「鏈接3」顯示了「鏈接31」爲在它的右邊，然後鼠標在其子菜單進一步的子菜單。
.menu {
position: relative;
}
ul {
width: 200px;
margin: 0;
color: black;
list-style:none;
padding:0;
max-height:100px;
overflow-x: hidden;
overflow-y: auto;
}
li {
padding:0.5em;
}
li:hover{
background-color:blue;
color:white;
}
li .menu {
position: absolute;
z-index: 10;
background-color:lightgrey;
opacity: 0;
transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
opacity: 1;
}
li.parent {
cursor: pointer;
}
.level2 {
top: 0px;
left: 200px;
}<div class="menu">
<ul>
<li>Link1</li>
<li class="parent">Link3...
<div class="menu level2">
<ul>
<li class="parent">Link31...
<div class="menu level2">
<ul>
<li>Link 311</li>
<li>Link 312</li>
<li>Link 313</li>
<li>Link 314</li>
</ul>
</div>
</li>
<li>Link 32</li>
<li>Link 33</li>
<li>Link 34</li>
</ul>
</div>
</li>
<li>Link2</li>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>我不知道如果我正確理解你的問題，而是試圖通過使用ID或CLASS隔離所需的元素。查看第三級菜單。
#primary_nav_wrap {
margin-top: 15px
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #f6f6f6
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block;
height: 200px;
}
#primary_nav_wrap ul li ul li:not(:hover) {
}
/* ul li ul li ul li {
overflow: auto;
} */
#subdeep {
overflow: auto;
height: 50px !important;
}<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul id="subdeep">
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
</ul>
</nav>也許你可以使用proposed solution作爲元件被定位彼此相對，因此菜單可以設置一些分支機構，你會「只是」要求，以確保父元素（s）仍然可見
這是從我可以看到的方式越野車。子菜單不會像他們應該的那樣漂浮在右邊。 – cjl750
@ cjl750在問題中，他並沒有問他是要讓子菜單處於正確的還是最低的狀態，這就是我將子菜單置於底部的情況。但是現在我已經更新了代碼，請仔細研究一下。 –
OP大概可以澄清一下，但是根據他的CodePen示例的樣子來判斷，如果你刪除了麻煩的'overflow：auto'風格，我假設他的意思是「每個子菜單都應該'彈出'先前的滾動條「。此外，您上面編輯的答案不適合我。我認爲問題是'li.parent'的結束標記中的拼寫錯誤。 – cjl750