Im finding that a <select> with <option> has limited styling options so I am trying to implement a bootstrap menu which will give me more styling options. I have the basic structure like this:

<style>
    .menuBox {
        width: 200px;
    }
    .lightBlueBackground {
        background-color: aqua;
    }
    .darkBlueBackground {
        background-color: blue
    }
</style>
<nav >
    <div  id="navbarSupportedContent">
        <ul >
            <li >
                <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                 
                </a>
                <div  aria-labelledby="navbarDropdown">
                    <a  href="#" id="aValue">Aaaaaaaaaaaaaa</a>
                    <a  href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<script>
$(document).ready(function () {
    $('#aValue').click(function () {
        console.log('A');
        $('#navbarDropdown').text("Aaaaaaaaaaaaaa");
    })
    $('#bValue').click(function () {
        console.log('B');
        $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb")
    })
});
</script>

In a <select> the down arrow is pinned to the right. In the navbar, the down arrow appears to be to the immediate right of the text in the <a snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $('#aValue').click(function() { console.log('A'); $('#navbarDropdown').text("Aaaaaaaaaaaaaa"); }) $('#bValue').click(function() { console.log('B'); $('#navbarDropdown').text("Bbbbbbbbbbbbbbbbbbbbbbb") }) });

.menuBox {
  width: 200px;
}

.lightBlueBackground {
  background-color: aqua;
}

.darkBlueBackground {
  background-color: blue;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<nav >
  <div  id="navbarSupportedContent">
    <ul >
      <li >
        <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">

        </a>
        <div  aria-labelledby="navbarDropdown">
          <a  href="#" id="aValue">Aaaaaaaaaaaaaa</a>
          <a  href="#" id="bValue">Bbbbbbbbbbbbbbbbbbbbbbb</a>
        </div>
      </li>
    </ul>
  </div>
</nav>