Question

我正在使用模板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>

如何在小屏幕上悬停或点击时子菜单下拉，而不是占用主导航栏空间。

谢谢！

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

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

1 个答案: