html - 子菜单/下拉项占用主要导航栏项之间的空间 - 为什么？

Question

我正在使用一个模板，HTML5UP - Miniport ，对于我的网页设计课 - 我刚刚开始学习编码。为了满足我类(class)的规范，我需要添加子菜单/下拉导航栏。这在桌面模式下工作正常，但是当我减小窗口大小时，我遇到了一些问题。子菜单保留在固定导航栏内，在其他菜单项之间推进。这是它当前的样子的链接:

https://jsfiddle.net/OrangeJones/9u0seLxu/

CSS 在 fiddle 链接中，但这是我的 HTML。

            <div class="nav">
              <ul class="container">
                <li><a class="jumper home" href="#top">Home</a></li>
                <li><a class="jumper about" href="#about">About</a>
                  <ul>
                    <li><a href="Name's Resume 2015.pdf" target="_blank">Resume</a></li>
                  </ul>
                </li>
                <li><a class="jumper portfolio" href="#portfolio">Portfolio</a></li>
                <li><a class="jumper blog" href="#blog">Blog</a>
                    <ul>
                        <li><a href="datajournalism.html">Best of the Twin Cities</a></li>
                    </ul>
                </li>
                <li>
                    <a class="jumper contact" href="#contact">Contact</a>
                </li>
              </ul>
            </div>

当鼠标悬停在小屏幕上或在小屏幕上单击时，我如何才能将其转到子菜单下拉的位置，而不是占用主导航栏空间。

谢谢!

Answer 1

用于显示和隐藏子菜单的 CSS 位于媒体查询内部，因此下拉元素在较小的屏幕上显示而不是被隐藏，您还对子菜单元素的背景进行了减速媒体查询。

.nav li ul 
{
  position: absolute;
  display: none;
  width: inherit;
}

.nav li:hover ul
{
  display: block;
}

.nav li ul li 
{
  display: block;
  background-color: #282828;
}

Updated fiddle