修复导航菜单下拉框位置

Question

下拉框的位置有问题。当我单击导航菜单项子菜单下拉框时，它在屏幕右上角的错误位置打开，而它在父项下方打开最多。 您可以在下图中看到此问题的预览。

我写的代码是这样的：

body {
  direction: rtl;
}

.dropdown-menu li>a:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
}

#top {
  background-color: #eee;
  font-size: 12px;
  padding: .8em 0 1em 0;
  border-bottom: 1px solid #e2e2e2;
  min-height: 40px;
}

#top .container {
  padding: 0 20px;
}

#top .btn-link,
#top-links li,
.top-links a {
  color: #888;
  text-shadow: 0 1px 0 #FFF;
  text-decoration: none;
}

#top .btn-link:hover,
.top-links a:hover {
  color: #444;
}

.top-links .dropdown-menu {
  top: 0;
}

.top-links .dropdown-menu a {
  text-shadow: none;
}

.top-links .dropdown-menu a:hover {
  color: #FFF;
}

#top .btn-link strong {
  font-size: 14px;
  line-height: 14px;
}

.top-links {
  padding-top: 6px;
}

.top-links a+a {
  margin-right: 15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="top">
  <div class="container">
    <div id="top-nav-right-items" class="pull-right top-links">
      <ul class="list-inline">

        <li><a href="">صفحه نخست</a></li>
        <li><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-external-link-square"></i> <span class="hidden-xs hidden-sm hidden-md">حساب کاربری</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a target="_blank" title="" href="">آیتم 1</a></li>
            <li><a target="_blank" title="" href="">آیتم 2</a></li>
            <li><a target="_blank" title="" href="">آیتم 3</a></li>
          </ul>
        </li>
        <li><a href="">سبد خرید</a></li>
        <li><a href="">تسویه حساب</a></li>
        <li><a href="">درباره ما</a></li>
        <li><a href="">تماس با ما</a></li>

      </ul>
    </div>
    <!-- #top-nav-right-items -->

  </div>
  <!-- container -->
</nav>

我该如何解决这个问题？谢谢。

Answer 1

你还没有给下拉父 position:relative 所以下拉保持在它的区域内。另外，提供下拉菜单top:40px 以确保它在导航栏下方打开

Working Demo

Answer 2

只需将position:relative 添加到其父级，以便下拉菜单相对于其父级定位。然后，如果需要，您也可以调整最高值。

body {
  direction: rtl;
}

.dropdown-menu li>a:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
}

#top {
  background-color: #eee;
  font-size: 12px;
  padding: .8em 0 1em 0;
  border-bottom: 1px solid #e2e2e2;
  min-height: 40px;
}

#top .container {
  padding: 0 20px;
}

#top .btn-link,
#top-links li,
.top-links a {
  color: #888;
  text-shadow: 0 1px 0 #FFF;
  text-decoration: none;
}
/* Added this code*/
.list-inline li {
  position: relative;
}
/**/

#top .btn-link:hover,
.top-links a:hover {
  color: #444;
}

.top-links .dropdown-menu {
  top: 30px;
}

.top-links .dropdown-menu a {
  text-shadow: none;
}

.top-links .dropdown-menu a:hover {
  color: #FFF;
}

#top .btn-link strong {
  font-size: 14px;
  line-height: 14px;
}

.top-links {
  padding-top: 6px;
}

.top-links a+a {
  margin-right: 15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="top">
  <div class="container">
    <div id="top-nav-right-items" class="pull-right top-links">
      <ul class="list-inline">

        <li><a href="">صفحه نخست</a></li>
        <li><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-external-link-square"></i> <span class="hidden-xs hidden-sm hidden-md">حساب کاربری</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a target="_blank" title="" href="">آیتم 1</a></li>
            <li><a target="_blank" title="" href="">آیتم 2</a></li>
            <li><a target="_blank" title="" href="">آیتم 3</a></li>
          </ul>
        </li>
        <li><a href="">سبد خرید</a></li>
        <li><a href="">تسویه حساب</a></li>
        <li><a href="">درباره ما</a></li>
        <li><a href="">تماس با ما</a></li>

      </ul>
    </div>
    <!-- #top-nav-right-items -->

  </div>
  <!-- container -->
</nav>