我需要解决一个问题，如果下拉菜单位于具有固定位置（position: fixed;）的容器内，css下拉菜单的内容可能会被切断。我更喜欢在不使用JavaScript的情况下解决问题。
一些背景资料
回答问题＆＃34;我看到了什么＆＃34;：当我将鼠标悬停在NVBAR固定的菜单项3上时，我看到一个截断下拉菜单，没有水平浏览器滚动条。这是screenshot。
这里的目标是开发一个仅限CSS的下拉菜单，该菜单也可以放置在position: fixed;的标题中。这适用于商业CMS，我们无法控制菜单的深度级别或菜单中包含的项目数量。
菜单在95％的时间内都能正常工作（因为它左边通常有一个徽标，右边有一个搜索字段）。对于这个问题，我只是试图覆盖边缘情况。当然，带有水平浏览器滚动条的切断菜单也不是很好，但它可以使用，导航不会中断。
右对齐最后一个菜单是一个选项，但也可能导致边缘情况，其中子菜单的嵌套是如此之深，以至于它们将被堆叠到左边，直到空间用完为止左边也是。
（我希望这会让这一点更加清晰。我担心这不可能只用css来解决，如果你想到的话 - 有点难过，考虑到常见的下拉菜单是）
请运行并查看以下测试用例。非常感谢任何指针！
body{
color: #333333;
background-color: #E6E6E6;
margin: 0;
padding: 0;
padding-top: 100px;
font-family: sans-serif;
line-height: 1.4;
}
a{
color: inherit;
text-decoration: none;
padding: 2px 4px;
}
li:hover > a{
background-color: rgba(255,255,255,0.7);
}
.navigation{
box-sizing: border-box;
padding: 20px 10px;
background-color: #999999;
width: 100%;
height: 60px;
margin-bottom: 60px;
}
.navigation.fixed{
position: fixed;
top: 0;
left: 0;
}
ul.nav,
ul.nav ul{
padding: 0;
margin: 0;
}
ul.nav{
float: right;
}
ul.nav ul{
display: none;
position: absolute;
left: 0;
padding: 4px 10px;
background-color: rgba(255,255,255,0.7);
}
ul.nav ul ul{
left: 100%;
top: -4px;
}
ul.nav li{
position: relative;
white-space: nowrap;
list-style-type: none;
float: left;
}
ul.nav > li{margin-left: 20px;}
ul.nav li:hover > ul{
display: block;
}
.content{padding: 0 10px;}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Dropdown-Menu in fixed header</title>
</head>
<body>
<div class="navigation fixed">
NAVBAR FIXED
<ul class="nav">
<li>
<a href="#">Menu Entry 1</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li>
<a href="#">Menu Entry 2</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li>
<a href="#">Menu Entry 3</a>
<ul>
<li>
<a href="#">Dropdown-Menu 1 with a very long title</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
</ul>
</div>
<div class="navigation">
NAVBAR STATIC
<ul class="nav">
<li>
<a href="#">Menu Entry 1</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li>
<a href="#">Menu Entry 2</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li>
<a href="#">Menu Entry 3</a>
<ul>
<li>
<a href="#">Dropdown-Menu 1 with a very long title</a>
<ul>
<li><a href="#">Dropdown-Menu 1 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
<li><a href="#">Dropdown-Menu 2 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 3 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 4 with a very long title</a></li>
<li><a href="#">Dropdown-Menu 5 with a very long title</a></li>
</ul>
</li>
</ul>
</div>
<div class="content">
<p>
<strong>Container with <code>position: fixed;</code></strong>
<ol>
<li>Hover over Menu Entry 3 in NAVBAR FIXED</li>
<li>You'll now see the dropdown-menu</li>
<li>The dropdown-menu is cut off, the viewport doesn't change and you can't scroll</li>
</ol>
</p>
<p>
<strong>Container with <code>position: static|relative|absolute|sticky;</code></strong>
<ol>
<li>Hover over Menu Entry 3 in NAVBAR STATIC</li>
<li>You'll now see the dropdown-menu</li>
<li>The dropdown-menu is cut off <b>but the viewport widens and you can scroll the window to the right to show the full width dropdown-menu</b></li>
</ol>
</p>
<p>
<strong>My Question: </strong>How can i achieve the same scrolling-behavior, when i position my CSS-Dropdown-Menus inside a container with position fixed?
</p>
</div>
</body>
</html>