Q: my navbar link is always squeezing whenever I klick the highlight button I got the list style from bootstrap but I don't know how to edit it to stop squeezing my navbar whenever I click the highlight button
<div id="links">
          <a href="index.html">Home</a>
          <a href="profile.html">About me</a>
          <a class="dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            Highlights
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background: gray; z-index: 100;">
            <li><a class="dropdown-item" href="#">Basics</a></li>
            <li><a class="dropdown-item" href="#">Fundamentals</a></li>
            <li><a class="dropdown-item" href="#">Core statistics</a></li>
          </ul>  
          <a href="contacts.html">Contact</a>
          <a id="login" href="login.html">Login</a>
        
        </div>


[![]

A: 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="links">
          <a href="index.html">Home</a>
          <a href="profile.html">About me</a>
          <a class="dropdown-toggle" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            Highlights
          </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background: gray; z-index: 100;">
            <li><a class="dropdown-item" href="#">Basics</a></li>
            <li><a class="dropdown-item" href="#">Fundamentals</a></li>
            <li><a class="dropdown-item" href="#">Core statistics</a></li>
          </ul>  
          <a href="contacts.html">Contact</a>
          <a id="login" href="login.html">Login</a>
        
        </div>


