RTL 子菜单未正确对齐

Question

我正在使用 bootstrap 4.4.1 作为我的模板，我正在尝试创建导航 RTL 因为这是阿拉伯语网站菜单应该显示为 RTL，

在我的代码中，从右数第 5 个项目有子菜单，但子菜单没有对齐到父菜单的左侧，如您在示例和屏幕截图中所见，如果我将 right :0; 添加到 .submenu然后它将菜单移动到最右边

菜单也不会停留在悬停状态，当我尝试移动到子项时它就会消失

不确定我哪里做错了..

菜单应该如下图所示

.menu{direction:rtl;}
.header-menu{background:#EEE6D3; min-height:30px; text-align:center;  font-size:18px;}
.header-menu ul {
 margin: 0;
 list-style: none;
 position: relative;
}

.header-menu ul li {
 display: inline-block;
 font-size: 18px;
 font-weight: 600;
}

.header-menu > ul > li > a {
 padding: 15px 30px;
}

.header-menu ul ul li > a {
 font-size: 16px;
 font-weight: 600;
}

.header-menu a {
 display: block;
 padding: 0 10px;
 font-size: 18px;
 font-weight: 700;
 position: relative;
 line-height: 1;
 text-decoration: none;
 color: #555;
 padding: 10px 20px;
 text-transform: uppercase;
}

.header-menu a:hover {
background-color: #A9852D;
color:#fff;
}

.header-menu ul ul {
display: none;
position: absolute;
top: 50px;
background:#EEE6D3;
}

.header-menu ul li:hover > ul {
display: inherit;

}

.header-menu ul ul li {
 min-width: 150px;
 float: none;
 display: list-item;
 position: relative;
}

.header-menu ul ul ul li {
position: relative;
top: -50px;
right: 230px;
}

.header-menu ul ul li {
border-bottom: 1px solid #f5f5f5;
}

<div class="container-fluid menu"> 
  <div class="row ">
    <div class="col-12">
  <nav class='header-menu'>
   <ul class="menu-ul">
     <li><a href="#home">الصفحة الرئيسية</a></li>
     <li><a href="#about">من نحن</a></li>
     <li><a href="#poetry">الشعر</a></li>
     <li><a href="#award">الجوائز</a></li>
     <li><a href="#media">قسم الإعلام</a>
     <ul class="submenu">
      <li><a href="#news">NEWS</a></li>
      <li><a href="#videos">VIDEOS</a></li>
     </ul>
     </li>
     <li><a href="#contact">اتصل بنا</a></li>
   </ul>
  </nav>
    </div>
 </div> 
</div>

Answer 1

对齐

问题与了解 position: relative 和 position: absolute 的工作原理有关。

当 absolute-positioned 元素放置在具有相对定位的元素内时 - 它使用 relative-positioned 元素来确定其边界，这可以为您所用。

对于你的情况，你可以通过这样做来解决你的问题-

.header-menu ul li {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    position: relative; /* new property */
}

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0; /* new property */
    padding: 0; /* new property to avoid user agent stylesheet polluting */
    background: #EEE6D3;
}

现在，因为 .header-menu ul ul 位于具有相对定位的 .header-menu ul li 之下 absolute - 它必须 "abide" 遵守其 parent 规则和边界，并坚持其 parent 的右侧。我希望这很清楚。

失去对 children 的关注（无关紧要，因为 OP 已经解决了这个问题，但留作将来参考）

就您的第二个问题而言（无法将鼠标悬停在子菜单项上）- 您可以通过 -

解决它

没有.header-menu ul ul
将该背景移动到 .header-menu ul ul li
从顶部 .header-menu ul ul 稍微填充
减少 .header-menu ul ul 的 top 属性大约。 2 个像素。`

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    padding: 2px 0 0 0;
}

.header-menu ul ul li {
    min-width: 150px;
    float: none;
    display: list-item;
    position: relative;
    background: #EEE6D3;
}

理由：您正在失去焦点，因为您不再将鼠标悬停在相关元素上。我们试图通过我刚刚编写的代码来做的是在子菜单上填充顶部并减少其与顶部的距离（从而使鼠标永远不会离开元素本身）。

当您将鼠标悬停在子菜单上时 - 您仍处于 parent 层次结构的范围内，这使得菜单项不会消失。

代码笔：https://codepen.io/ardethian/pen/MWwqbQM

Answer 2

只需将 display: inherit; 更改为 block。

.header-menu ul li:hover ul {
  display: block;
}

编辑： 要解决快速悬停问题，请尝试从 .header-menu ul ul:[=20 中删除 top 和 padding 属性=]

.header-menu ul ul {
  display: none;
  position: absolute;
  /* top: 50px */
  background: #eee6d3;
  padding: 0 /* remove padding */
}

https://codepen.io/awran5/pen/vYOzyJm

但我鼓励你尝试Bootstrap-rtl

<link href="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/css/bootstrap-rtl.min.css" rel="stylesheet" />
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/jquery.min.js"></script>
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu
                                                                            dropdown-menu-left" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

RTL 子菜单未正确对齐

RTL submenu not aligning properly

html

css

twitter-bootstrap

nav

arabic-support

对齐

失去对 children 的关注（无关紧要，因为 OP 已经解决了这个问题，但留作将来参考）