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

【问题标题】：Submenu/Drop-down items taking up space among main navbar items - why?子菜单/下拉项目占用主要导航栏项目之间的空间 - 为什么？
【发布时间】：2015-06-25 17:30:27
【问题描述】：

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

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

CSS 在小提琴链接中，但这是我的 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>

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

谢谢！

【问题讨论】：

标签： html css drop-down-menu navbar submenu

【解决方案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

【讨论】：