在JavaScript/CSS中单击时，下拉箭头向下移动

我理解这个问题有点困难，我使用ReactJS在

Nav bar

中创建了

dropdown

菜单，当我点击它时，它会显示下拉项，但它也会移动下拉箭头的位置。 我已尝试将高度和位置调整为

绝对

，但仍然相同，请提供任何建议/指针

我更新了CSS设置，如下所示

CSS设置：

     .btn-group  {
     
    
    position: relative;
    
    
    
    }
    
    
    
    .btn-group >div {
    position: absolute;
    
      
    }

代码片段：

     return (
        <nav className="header">
          <label className="logo">
            <a href="/">
              <img className="yoga-image" />
            </a>
          </label>
    
          <ul>
            <li>
              <a href="./basket">
                <i className="fa" style={{ "font-size": "24px" }} href="./basket">
                  &#xf07a;
                </i>
                <span class="badge badge-warning" id="lblCartCount">
                  {productItemInCart}
                </span>
              </a>
            </li>
 // the Signin/register button and dropdown code starts from here under the <li>
    
            <li>
    <button variant="success" href="./signin" style={{ background: "none", borderStyle: "none", borderStyle: "none", outline: "none  " }}>
            {userstatus ? (
              <i
                style={{ border: "none", background: "none", outline: "none" }}
                className=" fas fa-user-circle  
                "
              ></i>
            ) : (
              <i
                style={{
                  "border": "none",
                  "background": "none",
                  "outline": "none",
                  "font-size": "1.8rem",
                  "fontFamily": "Roboto",
                  "textTransform": "none",
                  "marginLeft": "-3rem",
                }}
              >
                Sign in/ Register
              </i>
            )}{" "}
          </button>
    // the below div define the drop down arrow 
     <div class="btn-group" style={{ minHeight: "15px", maxHeight: "15px",   positiom: "fixed"  }}>
                <button
                  type="button"
                  class="btn btn-secondary dropdown-toggle"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded=" !important"
                  
                >
                   
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                  <button class="dropdown-item" type="button">
                    Action
                  </button>
                  <button class="dropdown-item" type="button">
                    Another action
                  </button>
                  <button class="dropdown-item" type="button">
                    Something else here
                  </button>
                </div>
              </div>
    </li>
 </ul>
 </nav>
)

返回(



//登录/注册按钮和下拉代码从


{用户状态(
) : (
登录/登记
)}{" "}
//下面的div定义了下拉箭头
行动
另一个动作
还有别的吗


)

在单击之前：

点击后：

---

我认为如果您设置位置：标记的相对位置和感谢的第一个div子项的绝对位置，那么就可以了，但仍然存在相同的问题。对不起，我有点新，所以我不确定我是否完全按照你的要求做了，但是我已经按照你的建议用

CSS设置更新了上面的代码。我认为如果你设置position:relative为tag，absolute position为first div child of Thank，那么就可以了，但还是一样的问题。对不起，我有点新，所以我不确定我是否完全按照你的要求做了，但是我已经按照你的建议用
CSS设置更新了上面的代码。