0

I'm building a responsive menu using bootstrap and I already have this kind of menu: Home | studio | gallary| contacts. I have submenus, but I couldn't find a way how to create additional sabmenus in the submenus. I've putted "contacts" to my right side. So, I need something like press "contacts" , it shows list of cities for choice: 'city 1', 'city 2', 'city 3'. If choosing 'any city' it must show the full address of it. Does anyone knows if bootstrap has special "class or id" for this purpose? I would really appreciate any help. Thanks … my code is here:

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
  </div>

<div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
     <li class="active dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home<span class="glyphicon glyphicon-arrow-down"></span></a>
 <ul class="dropdown-menu">
     <li><a href="#">News</a>/li>
     <li><a href="#">UFW</a></li>                
     <li><a href="#">The press</a></li>                
 </ul>
     <li><a href="#">Studio</a></li>
     <li><a href="#">Gallary</a></li>
     <li><a href="#">List</a></li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
     <li class="dropdown active">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Contacts <b class="caret"></b></a>
 <ul class="dropdown-menu">
     <li><a href="#">City 1</a>
 <ul class="dropdown-menu">
     <li class="navbar-text"> street ...</a></li>
     <li><a href="#"> local phone</a></li>
     <li><a href="#"> mobile</a></li>
 </ul>
     </li>
     <li class="divider"></li>
     <li><a href="#">City 2</a>
 <ul class="dropdown-menu">
     <li class="navbar-text"> street ...</a></li>
     <li><a href="#"> local phone</a></li>
     <li><a href="#"> mobile</a></li>
     <li class="divider"></li>
     <li class="navbar-text">street ...</li>
     <li><a href="#"> local phone</a></li>
     <li><a href="#"> mobile</a></li>
 </ul>
     </li>
     <li class="divider"></li>
     <li><a href="#">City 3</a>
 <ul class="dropdown-menu">
     <li class="navbar-text"> street ...</a></li>
     <li><a href="#"> local phone</a></li>
     <li><a href="#"> mobile</a></li>
</ul>
     </li>
</ul>
     </li>
</ul>

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Bogdan
  • 85
  • 1
  • 3
  • 9

1 Answers1

1

As you will see here: Bootstrap dropdown sub menu missing, submenus don't existing in Bootstrap 3, but you can add some CSS to make it work. Here is an example using your code in a right aligned navbar submenu.

Right-aligned navbar submenus: https://codeply.com/p/OJpNtXpl6A

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    thx Skelly, it's ok with majority of browsers except firefox. the problem is in the dropdown-menu with the carets, they slid down. i tried myself fix it but all my efforts went to worse results :( is there any idea how to run it? thx... – Bogdan Mar 22 '14 at 11:09