javascript - 在 React-JavaScript/CSS 中单击时下拉箭头向下移动

Question

我在理解这个问题上有点困难，我dropdown在使用 ReactJS 时制作了菜单Nav-bar，当我点击它时，它会显示下拉项目，但它也会移动下拉箭头的位置。我已尝试将高度和位置调整为absolute 但仍然相同，请提供任何建议/指针。

我更新了 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>
)

在任何点击之前：

我点击后：

标签： javascriptcssreactjsdrop-down-menudropdown