Question

发布以下内容后，我成功获得了一个从右到右的子菜单方法：Navigation submenu creates white space

我现在的问题是我希望屏幕最右侧的子菜单出现在初始下拉菜单的左侧。我认为我可以使用相同的代码，只需添加position: relative; left: -350px或使其左移即可使它们向右显示。但这实际上造成了我以前遇到的空白问题。

对此可能有一个简单的解决方案，但我确定无法解决。

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

.dropdown-subcontent {
right:100%;
}

代替左：100％;

导航子菜单-出现在左侧

1 个答案: