Menu and submenu with bootstrap

    <ul class="nav nav-pills">
...
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>SubMenu1</li>
          <li>SubMenu2</li>
        </ul>
      </li>
     ...
    </ul>

More details look at: link

I do not know if it's what you want, but here it worked:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
       <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                            <ul>
                                <li><a href="#">Teste</a></li>
                            </ul>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
       </ul>
</div>

Test with this structure:

<ul class="nav nav-tabs">
 ...
 <li role="presentation" class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
   Dropdown <span class="caret"></span>
   </a>
    <ul class="dropdown-menu">
     ...
    </ul>
  </li>
...
</ul>

The documentation shows the basic example of a dropdown in the following structure:

li
  > a 
  > ul
     > li
     > + li's ...
  > /ul
/li

Where <a> references the <ul> menu as anchor.

To function only include the class dropdown in <li> parent and the dropdown classes in the data-toggle and dropdown-toggle in the class of the <a> tag and reference using the class dropdown-menu in <ul> , like this:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
  <ul class="nav navbar-nav">

    <li class="dropdown">

      <a href="#" data-toggle="dropdown" class="dropdown-toggle"> About <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Enterprise</a></li>
        <li><a href="#">Autor</a></li>
        <li><a href="#">Something else</a></li>
      </ul>

    </li>

    <li>
      <a href="#">Services</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</div>

See working at jsfiddle