下拉菜单 - 更改打开位置

Question

下面是我的 html 代码：-

.header {
 background-color: #b6b4b4;
 padding: 5px;
}
.logo {
 border-radius: 30px;
 float: left;
}
#social {
 width: 50px;
 border-radius: 100%;
 float: right;
}
.navigatbar {
 margin-top: -16px;
}
#navigat {
 display: inline;
 color: #b6b4b4;
 font-size: 21px;
 font-family: 'Poppins', sans-serif;
 margin: 0 10px;
 padding: 0 3px 0 3px;
}
.topnav {
 background: #ffffff;
}
a {
 color: #2ad2c9;
}
.active {
 background-color: #e8e8e8;
}
.droplinks {
  position: absolute;
  background-color: #ffffff;
  min-width: 140px;
  display: none;
}
.droplinks a {
  padding: 10px;
  display: block;
}
.dropbutton:hover .droplinks {
  display: block;
}

<body link="#008080" vlink="#66b2b2">
<div class="header">
 <img src="images/logo.jpg" class="logo">
 <a href="#" target="blank"><img src="slike/yt.png" id="social"></a>
 <a href="#" target="blank"><img src="slike/ig.png" id="social"></a>
 <a href="#" target="blank"><img src="slike/fb.png" id="social"></a>
</div>
<div class="navigatbar">
 <ul class="topnav">
  <li class="active" id="navigat"><a href="index.html">Početna</a></li>
  <li class="dropbutton" id="navigat"><a href="fitnes.html">Fitnes</a>
    <div class="droplinks">
     <a href="#">Treninzi</a>
     <a href="#">Dijagnostika</a>
    </div>
  </li>
  <li id="navigat"><a href="skolica.html">Školica sporta</a></li>
  <li id="navigat"><a href="boks.html">Boks</a></li>
  <li id="navigat"><a href="personal.html">Personalni treninzi</a></li>
  <li id="navigat"><a href="ishrana.html">Ishrana i zdravlje</a></li>
  <li class="dropbutton" id="navigat"><a href="rehab.html">Prevencija i rehabilitacija</a>
   <div class="droplinks">
    <a href="#">Prevencija</a>
    <a href="#">Rehabilitacija</a>
    <a href="#">Kiropraktika</a>
    <a href="#">Kinezitejping</a>
   </div>
  </li>
  <li id="navigat"><a href="kontakt.html">Kontakt</a></li>
 </ul>
</div>
</body>

现在，问题来了：我的下拉菜单有效，但它们都在导航栏左侧第一个

元素下打开。我哪里出错了？我试着添加一些 margin-left 并且它起作用了，但问题是它移动了它们两个相同数量的像素，并且它们仍然在同一个地方打开。我可以给它们不同的类并给它们添加不同的 margin-left，但我确信这不是唯一可能的解决方案。任何人都可以帮助我吗？

Answer 1

在 2 个地方更改您的 CSS：

#navigat {
    display: inline;
    color: #b6b4b4;
    font-size: 21px;
    font-family: 'Poppins', sans-serif;
    margin: 0 10px;
    padding: 0 3px 0 3px;
    position: relative; /* add this line */
}
.droplinks {
    position: absolute;
    background-color: #ffffff;
    min-width: 140px;
    display: none;
    left: 0; /* add this line */
    z-index: 1; /* add this line */
}

Answer 2

将此添加到您的 css

.dropbutton { position: relative; }

绝对定位的元素是相对于其具有非静态位置的第一个祖先定位的。 position: static 是所有元素的默认值，除非另有说明。

这意味着在您的情况下，下拉菜单都是相对于文档正文定位的。您想要的是相对于触发它们的按钮定位它们。上面的建议应该可以解决这个问题。

此外，使用 left、top、right 和 bottom 而不是 margin 来定位下拉菜单。

下拉菜单 - 更改打开位置

DROPDOWN MENU- changing where it opens

html

css

navigationbar

drop-down-menu