固定下拉菜单可滚动

Question

我有一个固定的下拉菜单，如果其高度大于视口，则需要能够滚动该菜单。我尝试添加溢出：滚动和溢出：自动添加到菜单，但似乎都无法正常工作。我要去哪里错了？

JSFiddle：https://jsfiddle.net/L7wxsqan/

菜单CSS：

#nav ul li:hover>ul {
    display: block;
    position: fixed;
    text-align: center;
    margin: 0 auto;
    padding-top: 10px;
    left: 0;
    right: 0;
    overflow: auto;
}

谢谢！

Answer 1

a.blocklink {
	text-decoration: none;
	color: inherit;
	display: block;
}

#nav {
	width: 100%;
	background-color: white;
}

#projects {
	display: inline-block;
}

#nav ul {
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	list-style-type: none;
	text-align: center;
	margin: auto;
	padding-top: 6px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#nav ul ul {
	width: calc(100% - 20px);
	list-style-type: none;
	font-weight: normal;
	display: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#nav ul li {
  position: relative;
}

#nav ul li:hover>ul {
	display: block;
	position: fixed;
	text-align: center;
	margin: 0 auto;
	padding-top: 10px;
	left: 0;
	right: 0;
  max-height: 100%;
  overflow: auto;
}

#one {
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid black;
	color: #000000;
	background-color: white;
}

#one:active {
	background-color: black;
	color: white;
}

#one:hover {
	background-color: black;
	color: white;
}

@media screen and (orientation: landscape) {
	#nav ul ul {
		width: 20%;
	}   
}

        <div id="nav">
            <ul>
               <li id="projects">
                  Projects
                  <ul>
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>				
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	  
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>				
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	 
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>				
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	  
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>				
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	
                     <a href="/one" class="blocklink">
                        <li id="one">One</li>
                     </a>	                         
                  </ul>
               </li>
            </ul>
         </div>

您需要做的就是添加以下代码（使父级位置相对）：

#nav ul li {
  position: relative;
}

并在第二个ul中添加max-height: 100%;。

Answer 2

将#nav ul ul的高度设置为100％或其他值