Блог

У меня возникают небольшие трудности с пониманием этой проблемы, я создал dropdown меню в Nav-bar с помощью ReactJS, и когда я нажимаю на него, в нем отображается выпадающий элемент, но он также перемещает положение стрелки выпадающего списка. Я пытался настроить высоту и положение на 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">
                  amp;#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>
)

  

Перед любым щелчком:

После того, как я нажму: