修复导航菜单下拉框位置异常：下拉框未显示在父项下方

我来帮你搞定这个下拉菜单的定位问题！你的情况是RTL布局下，下拉菜单跑到了屏幕右上角，核心问题出在自定义样式和RTL布局的定位冲突上，下面是具体的修复方案：

问题原因分析 #

1. 你自定义的CSS里写了.top-links .dropdown-menu { top: 0; }，这行代码强制下拉菜单的顶部和父元素顶部对齐，直接覆盖了Bootstrap默认的“在父元素下方展开”的逻辑。
2. RTL布局下，下拉菜单的绝对定位需要依赖父元素的相对定位属性，否则会相对于页面整体定位，导致位置跑偏。

修复步骤 #

1. 移除错误的top:0样式
   删掉你CSS里的这一行：

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

   或者替换成top: 100%，确保下拉菜单刚好在父菜单项的下方展开。

2. 给父菜单项添加相对定位
   让下拉菜单能相对于父菜单项定位，添加这个样式：

   .top-links .dropdown {
     position: relative;
   }
   

3. 适配RTL布局的对齐方式
   为了符合RTL排版习惯，让下拉菜单和父菜单项右对齐，补充样式：

   .top-links .dropdown-menu {
     right: 0;
     left: auto;
     margin-top: 2px; /* 可选：增加一点间距，避免和父菜单紧贴 */
   }
   

修复后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    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 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; }
    
    /* 新增修复样式 */
    .top-links .dropdown {
      position: relative;
    }
    .top-links .dropdown-menu {
      right: 0;
      left: auto;
      top: 100%;
      margin-top: 2px;
    }
  </style>
  <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>
</head>
<body>
<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 class="dropdown">
<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">
<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>
</body>
</html>

这样修改后，点击“حساب کاربری”时，下拉菜单就会正确显示在它的下方，完全符合RTL布局的排版逻辑啦。

内容的提问来源于stack exchange，提问作者Mohammad Mehrabi