bootstrap: style="display:none" get's automatically appended in the 'li'

Question

I have following piece of code in my jsp.

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li ><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li style=""><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
    </ul>
</li>

but when it's getting rendered in the browser, automatically the code becomes as following:

<li id="report" class="dropdown open"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Report <b class="caret"></b></a>
    <ul class="dropdown-menu">
              <li style="display: none;"><a href="#">Action</a></li>
              <li style="display: none;"><a href="#">Another action</a></li>
              <li style="display: none;"><a href="#">Something else here</a></li>
              <li class="divider" style="display: none;"></li>
              <li class="nav-header" style="display: none;">Nav header</li>
              <li style="display: none;"><a href="#">Separated link</a></li>
              <li style="display: none;"><a href="#">One more separated link</a></li>
    </ul>
</li>

I am unable to understand from where all the li's are getting this style="display:none" property, is it some bootstrap javascript which is doing it. I am debugging the code on chrome.

Answer 1

I was not able to track, which js was doing the changes to my lists, so what I did is, I put every li in a class called 'visible' and in my tag I put a style as follows:

<style>
.visible{

display:inline !important;
}
</style>