Bootstrap dropdown-menu defaults to open when site loads

Question

The issue I am having is that I have added a dropdown menu inside of my navigation bar for my site that uses bootstrap, and cannot figure out why the dropdown opens as the default state when the site opens. I am new to bootstrap. I have attached the code for the navbar below:

<div class="navbar navbar-inverse">
            <ul class="nav nav-pills pull-right">
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle">
                        <span class="glyphicon glyphicon-list"></span>
                    </a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a>Add New Item</a></li>
                        <li><a>PC Requests</a></li>
                        <li><a>Kit Building</a></li>
                    </ul>
                </li>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Audit</a></li>
                <li><a href="#">Check-Out</a></li>
                <li><a href="#">Check-In</a></li>
            </ul>
            <h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span>  Gentex Vision IVMS</h3>
</div>

Any help would be greatly appreciated!

Answer 1

Given the following (copied from Bootstrap), line #13 contains: class="dropdown-menu show". The dropdown menu is displayed on each successive page load. Remove the word show to prevent this behavior.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  <li class="nav-item dropdown show">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Dropdown</a>
    <div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 39px, 0px);">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
</ul>

Hope this helps.

Answer 2

The point is to add open to <li class="dropdown">.

Practically, it should look like this

<div class="navbar navbar-inverse">
        <ul class="nav nav-pills pull-right">
            <li class="dropdown open">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-list"></span>
                </a>
                <ul role="menu" class="dropdown-menu">
                    <li><a>Add New Item</a></li>
                    <li><a>PC Requests</a></li>
                    <li><a>Kit Building</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Audit</a></li>
            <li><a href="#">Check-Out</a></li>
            <li><a href="#">Check-In</a></li>
        </ul>
        <h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span>  Gentex Vision IVMS</h3>

then it will be open by default

Best regards