Question

这是我的html代码： -

＆＃13;

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

＆＃13;

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

＆＃13;

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

元素下打开。我哪里出错了？我试图添加一些保证金 - 它可以工作，但问题是它将两个像素移动到相同的像素，并且它们仍然在同一个地方打开。我可以为他们提供不同的课程，并为他们添加一个不同的边距，但我确信这不是唯一可行的解决方案。有人可以帮帮我吗？

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-改变打开的位置

2 个答案: