Question

我想使用媒体查询在小屏幕上显示，其中包括菜单中的子菜单（直接位于父主菜单条目下方，而不是在最后一个主菜单条目下方）。这是我到现在为止（包括常规屏幕设备上的代码），我只是在为这个内联子菜单创建适当的CSS时遇到了麻烦：

＆＃13;

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

＆＃13;

/* 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;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ff6a00;
  color: white;
}


/* 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: absolute;
  z-index: 10000;
  top: 100%;
}

.dropDownContent a {
  float: none;
  display: block;
  color: #000;
  padding: 14px 16px;
  text-decoration: none;
}

.dropDown:hover .dropDownContent {
  display: block;
}

.dropDownP:hover,
.dropDown:hover .dropDownP,
.dropDown a:hover {
  background-color: #ff6a00;
  color: white;
}


/* Small screen settings */

@media screen and (max-width: 1076px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .dropDown {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1076px) {
  .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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试将position: relative;和top: 40px添加到.topnav.responsive a。

（或者让bootstrap为你做这一切）。

用于小屏幕设备的下拉子菜单

1 个答案: