Question

代码可以在这里运行：https://jsfiddle.net/v0ey36cn/和相关的HTML（包含CSS）代码如下：

function toggleState() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

html,
body {
  height: 100%;
  color: #000000;
  background-color: #0072C6;
}

/* Add a black background color to the top navigation */

.topnav {
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  top: 0;
  visibility: none;
  z-index: 1000;
  width: 100%;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: right;
  display: block;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hide the link that should open and close the topnav on small screens */

.topnav .icon {
  display: none;
}

/* Dropdown menu */

.dropDownP {
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

.dropDown {
  display: inline-block;
  float: right;
}

.dropDownContent {
  display: none;
  position: relative;
  z-index: 10000;
}

.dropDownContent a {
  float: none;
  display: block;
  color: #fff;
  text-decoration: none;
}

.dropDown:hover .dropDownContent {
  display: block;
}

.dropDownP:hover,
.dropDown:hover .dropDownP,
.dropDown a:hover {
  background-color: rgba(221, 221, 221, 0.85);
  /* grey */
  color: black;
}

/* Small screen settings */

@media screen and (max-width: 106px) {
  .topnav a:not(: first-child) {
    display: none;
  }
  .dropDown {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 106px) {
  .topnav.responsive {
    position: fixed;
  }
  .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
  .topnav.responsive img {
    float: none;
    display: block;
    text-align: left;
  }
}

<body style="text-align:center;">

    <div class="header">
      <div class="topnav" id="myTopnav">
        <a href="javascript:void(0);" class="icon" onclick="toggleState()">&#9776;</a>
        <a href="?l3">Link 3</a>
        <a href="?l2">Link 2</a>
        <div class="dropDown">
          <div class="dropDownContent">
            <a href="?o1">Option 1</a>
            <a href="?o2">Option 2</a>
          </div>
          <a class="dropDownP">Dropdown</a>
        </div>
        <a href="?l1">Link 1</a>
      </div>
    </div>

</body>

我使用skrollr（skrollr.min.js文件可以在github找到），其余的细节可以直接从我上面的网站上看到。我有两个问题：

1）我怎样才能更正下拉菜单在悬停时向下显示，而不是这个向上奇怪的东西？我在CSS中做错了什么？

2）当下拉列表出现时，如何让下拉菜单不延伸整个导航栏？

3）如何为小屏幕制作特殊的下拉菜单，以便下拉列表直接显示在堆叠的“主菜单”下？（请参阅我网站上的代码，还有移动主菜单的代码，但不是我想在这里要求的特殊下拉菜单）

感谢您的时间！

Answer 1

这是因为您的HTML错误。您应该在菜单文本后面放置子菜单的内容。

替换

<div class="dropDown">
    <div class="dropDownContent">
        <a href="?o1">Option 1</a>
        <a href="?o2">Option 2</a>
    </div>
    <a class="dropDownP">Dropdown</a>
</div>

通过

<div class="dropDown">
    <a class="dropDownP">Dropdown</a>
    <div class="dropDownContent">
        <a href="?o1">Option 1</a>
        <a href="?o2">Option 2</a>
    </div>
</div>

此外，要使下拉列表不在菜单中的任何位置（因此它不会使其展开），您需要绝对定位。

.dropDownContent{
    position:absolute;
    top:100%;
}

至于你的第三个问题，你需要使用媒体查询。由于你的小提琴中有太多无用的元素，我无法在这方面给你更多的指导。

Answer 2

首先，元素的顺序在这里是错误的：

<div class="dropDown">
      <div class="dropDownContent">
        <a href="?o1">Option 1</a>
        <a href="?o2">Option 2</a>
      </div>
      <a class="dropDownP">Dropdown</a>
    </div>

<a class="dropDownP">Dropdown</a>应该 <div class="dropDownContent">以上，以便在下拉列表可见时高于它。

但除此之外，您的HTML结构应该是不同的。你正在使用块元素，它将下拉分布在整个wodth上。请改用ul。

<div class="header">
  <ul class="topnav" id="myTopnav">
    <li><a href="javascript:void(0);" class="icon" onclick="toggleState()">&#9776;</a></li>
    <li><a href="?l3">Link 3</a></li>
    <li><a href="?l2">Link 2</a></li> 
    <li class="dropDown">Dropdown
      <ul class="dropDownContent">
        <li><a href="?o1">Option 1</a></li>
        <li><a href="?o2">Option 2</a></li>
      </ul>
    </li>
    <li><a href="?l1">Link 1</a></li>
  </ul>
</div>

你需要相应的CSS，但几乎每个在线指南都可以找到关于下拉菜单（主菜单项position: relative，子菜单position: absolute）

下拉菜单向上而不是向下

2 个答案: