Navbar on top of another navbar dropdown menu

Created by: Deele

If we put two .navbar's one after another, and open dropdown menu from top navbar, it falls behind bottom navbar.

If I remove z-index property for .navbar, then it displays correctly.

Is there a reason why z-index for navbar exists, cause I can't see reason why navbar should have z-index.

To reproduce, use following code:

<nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav navbar-right">
        <li class="active" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown item 1</a></li>
                <li><a href="#">Dropdown item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
<nav class="navbar navbar-default" role="navigation">
</nav>