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

问题描述

我在理解此问题时遇到了一些困难，我已经使用ReactJS在dropdown中创建了Nav-bar菜单，当我单击它时，它将显示一个下拉菜单项，但是它也会移动下拉箭头的位置。 我试图将高度和位置调整为absolute，但仍然相同，请提出任何建议/指针。

- Update1 更新了CSS设置，如下所示：

-CSS setting

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

-Snippet代码

     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",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>
)

• Before any click

  

• After i click

  

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）