CSS dropdown menu gets cut off inside container with position fixed
<p>i need to solve a problem where the contents of a css dropdown menu might get cut off if the dropdown menu is inside a container with a fixed position (<code>position: fixed;</code>). I'd prefer to solve the problem without the use of JavaScript.</p>

<p><strong>Some Background Information</strong></p>

<ul>
<li><p>To answer the question "what i am seeing": When i hover over Menu Entry 3 of NVBAR fixed, i see a cut off Dropdown-Menu and no horizontal browser scrollbar.  Here's a <a href="https://dl.dropboxusercontent.com/u/72525/stack-dropdown-fixed.png" rel="nofollow">screenshot</a>.</p></li>
<li><p>The goal here is to develop a CSS only dropdown-menu which also works when placed i.e. in a header with <code>position: fixed;</code>. This is for a commercial CMS where we have no control over how much levels deep a menu will be or how many items it will contain.  </p></li>
<li><p>The menu works fine 95% of the time (since there typically is a logo to the left of it and a search field to the right) and with this question, i am just trying to cover edge cases. Sure, a cut off Menu with a horizontal browser scrollbar isn't pretty either, but it is usable and navigation doesn't break.  </p></li>
<li><p>Right aligning the last menu is an option but might also lead to an edge case, where the nesting of submenus is so deep, that they'll be stacked to the left until the space runs out on the left side too.  </p></li>
</ul>

<p>(<em>I hope this makes this a bit clearer. I fear this won't be possible to solve with css only, which – if you think about is – is a bit sad, considering how common dropdown menus are.</em>)</p>

<p>Please run and see the following test case. Thanks a lot for any pointers!</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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 &gt; 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 &gt; li{margin-left: 20px;}
ul.nav li:hover &gt; ul{
 display: block;
}

.content{padding: 0 10px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="de"&gt;
&lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;title&gt;Dropdown-Menu in fixed header&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="navigation fixed"&gt;
 NAVBAR FIXED
 &lt;ul class="nav"&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 1&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 2&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 3&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="navigation"&gt;
 NAVBAR STATIC
 &lt;ul class="nav"&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 1&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 2&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Menu Entry 3&lt;/a&gt;
   &lt;ul&gt;
    &lt;li&gt;
     &lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 1 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 2 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 3 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 4 with a very long title&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Dropdown-Menu 5 with a very long title&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="content"&gt;
 &lt;p&gt;
  &lt;strong&gt;Container with &lt;code&gt;position: fixed;&lt;/code&gt;&lt;/strong&gt;
  &lt;ol&gt;
   &lt;li&gt;Hover over Menu Entry 3 in NAVBAR FIXED&lt;/li&gt;
   &lt;li&gt;You'll now see the dropdown-menu&lt;/li&gt;
   &lt;li&gt;The dropdown-menu is cut off, the viewport doesn't change and you can't scroll&lt;/li&gt;
   
  &lt;/ol&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;strong&gt;Container with &lt;code&gt;position: static|relative|absolute|sticky;&lt;/code&gt;&lt;/strong&gt;
  &lt;ol&gt;
   &lt;li&gt;Hover over Menu Entry 3 in NAVBAR STATIC&lt;/li&gt;
   &lt;li&gt;You'll now see the dropdown-menu&lt;/li&gt;
   &lt;li&gt;The dropdown-menu is cut off &lt;b&gt;but the viewport widens and you can scroll the window to the right to show the full width dropdown-menu&lt;/b&gt;&lt;/li&gt;
   
  &lt;/ol&gt;
 &lt;/p&gt;
 &lt;p&gt;
  &lt;strong&gt;My Question: &lt;/strong&gt;How can i achieve the same scrolling-behavior, when i position my CSS-Dropdown-Menus inside a container with position fixed?
 &lt;/p&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>