Question

如果窗口宽度小于1086px，我希望子菜单显示在主菜单的左侧。我正在使用这段代码来实现这一点，但是它没有用。我将背景设置为红色只是为了显示何时达到最大宽度。如果背景变成红色，为什么right: 100%似乎没有做任何事情？

@media (max-width: 1086px) {
  .dropdown-subcontent {
    right: 100%;
    background: red;
  }
}

.dropdown {
  position: relative;
  display: inline-block;
  position: absolute;
right: 180px;
}

.dropdown2 {
  position: relative;
}

.dropdownsub {
  position: absolute;
  display: hidden;
  background: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  left: 5px;
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
}

.dropdown-subcontent {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
  background: orange;
}

@media (max-width: 1086px) {
  .dropdown-subcontent {
 	right: 100%;
	background: red;
  }
}

@media (max-width: 1086px) {
  .dropdown-content {
    font-size: 17px;
  }
}

.dropdown-content a {
  color: black;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #cccccc;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown2:hover .dropdown-subcontent {
  display: inline-block;
}

.dropdownsub:hover .dropdown-subcontent {
  display: none;
}

.dropbtn:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Accounts Receivable</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

</head>

<body bgcolor="#cccccc">
  <div class='dropdown'>
    <button class='dropbtn'>MENU<i class='fas fa-chevron-down'></i></button>
    <div class='dropdown-content'>
      <a href='#'>Option 1</a>
      <div class='dropdown2'>
        <a href='#'>Submenu ></a>
        <div class='dropdown-subcontent'>
          <a href='#'>Submenu Option 1</a>
          <a href='#'>Submenu Option 2</a>
          <a href='#'>Submenu Option 3</a>
        </div>
      </div>
      <a href='#'>Option 3</a>
    </div>
  </div>

Answer 1

您搜索的是

@media (max-width: 1086px) {
  .dropdown-subcontent {
    left: -100%;
    background: red;
  }
}

right: 100%;与left: 0;

检查DIV的嵌套方式以及它们的位置取决于其父元素。

.dropdown {
  position: relative;
  display: inline-block;
  position: absolute;
right: 180px;
}

.dropdown2 {
  position: relative;
}

.dropdownsub {
  position: absolute;
  display: hidden;
  background: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  left: 5px;
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
}

.dropdown-subcontent {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  letter-spacing: 0px;
  min-width: 180px;
  background: orange;
}

@media (max-width: 1086px) {
  .dropdown-subcontent {
 	left: -100%;
	background: red;
  }
}

@media (max-width: 1086px) {
  .dropdown-content {
    font-size: 17px;
  }
}

.dropdown-content a {
  color: black;
  padding: 4px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #cccccc;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown2:hover .dropdown-subcontent {
  display: inline-block;
}

.dropdownsub:hover .dropdown-subcontent {
  display: none;
}

.dropbtn:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Accounts Receivable</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

</head>

<body bgcolor="#cccccc">
  <div class='dropdown'>
    <button class='dropbtn'>MENU<i class='fas fa-chevron-down'></i></button>
    <div class='dropdown-content'>
      <a href='#'>Option 1</a>
      <div class='dropdown2'>
        <a href='#'>Submenu ></a>
        <div class='dropdown-subcontent'>
          <a href='#'>Submenu Option 1</a>
          <a href='#'>Submenu Option 2</a>
          <a href='#'>Submenu Option 3</a>
        </div>
      </div>
      <a href='#'>Option 3</a>
    </div>
  </div>

导航子菜单-如果窗口太窄则显示在左侧

1 个答案: