javascript - 如何在悬停时将下拉内容放置在左侧导航的右侧

Question

所以我有一个左侧导航栏，它在悬停时打开，里面有一个按钮，悬停时也有下拉内容。但是现在下拉内容出现在按钮下方(在左侧导航内)。我希望下拉内容出现在按钮旁边，左侧导航的右侧(因此在左侧导航之外)。

有什么想法吗？

<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
    <div class="dropdown">
      <button class="dropbtn" [ngStyle]="{'color': 'white','font-style': 'bold', 'font-size': '20.01px', 'font-family':'sans-serif'}">  <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>

/* The side navigation menu */
.sidenav {
  height: 70%;
  width: 55px;
  position: fixed;
  z-index:0;
  top:200px;
  left:0px;
  right:50px;
  background-color: #ff0000;
  overflow-x:hidden;
  padding-top: 0px;
  transition: 0.5s;
}
  /* ON HOVER */
  .sidenav:hover {
    width: 250px;
  }
.sidenav normalb:hover {
  background-color: #4F0909;
}
.buttonGroup {
  align-content: baseline;
}

  /* Darker background on mouse-over */
  .btn:hover {
    background-color: #4F0909;
  }
  .sidenav h1 {
    background-color: #850101; /* Blue background */
    border: thin; /* Remove borders */
    color: white; /* White text */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
    overflow:hidden;
  }
    .sidenav h1:hover {
      background-color: #4F0909;
    }

  /* The navigation menu links */
  .sidenav a {
    padding-left:10px;
    text-decoration: none;
    font-size: 18px;
    color: #f1f1f1;
    display:block;
    transition: 0.3s
  }

  .sidenav a:hover, .offcanvas a:focus {
    color: #f1f1f1;
  }

#main {
  transition: margin-left .5s;
  padding: 20px;
}

.dropdown {

  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #640303;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1;  
}

  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #D90909;
    }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #D60707;
}

Answer 1

如果您确定左侧导航栏的宽度，则可以设置 .dropdown-content 的 left 属性。由于 dropdown-content 是 absolute，设置左侧值会将下拉列表移到右侧。

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #640303;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top:0;
  left: 144px;
  /* Here I have set the width (minus padding) of the dropdown-content */
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #D90909;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {
  background-color: #D60707;
}

<div id="mySidenav" class="sidenav" style="background-image: linear-gradient(#7C0D0D, #DC0404);">
  <div class="dropdown">
    <button class="dropbtn" style="color: white;font-style: bold; font-size: 20.01px; font-family:sans-serif;">  <img src="assets/icon-overview-white.png" style="padding-right:14px; ">Screening</button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>