Подменю с bootstrap

Question

Я не так разбираюсь в CSS и Bootstrap, поэтому я не могу построить 2 подменю. У вас есть простое решение для меня?

<!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.php">SAI</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Titolo <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Sottotitolo 1</a></li> 
     <li><a href="#">Sottotitolo 2</a></li> 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Sottotitolo 3 <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Nuovo sottotitolo 1</a></li> 
       <li><a href="#">Nuovo sottotitolo 2</a></li> 
       <li><a href="#">Nuovo sottotitolo 3</a></li> 
       <li><a href="#">Nuovo sottotitolo 4</a></li> 
       <li><a href="#">Nuovo sottotitolo 5</a></li> 
      </ul> 
     </li> 
    </ul> 
</li> 

       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

Я нашел несколько решений на этом сайте, но они слишком сложны для меня, потому что у меня есть несколько проблем с английским языком.

Благодаря

Giampiero

Answer 1

Я сделал небольшой пример для вас, который реализует выпадающий список Bootstrap с небольшим настраиваемым дополнением к поддержке суб-меню, которое открывается при наведении курсора мыши:

HTML

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <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 role="separator" class="divider"></li> 
    <li class="sub-menu"><a href="#">Sub-menu <span class="glyphicon glyphicon-play"></span></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> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS (составитель из LESS)

li.sub-menu { 
    position: relative; 
} 
li.sub-menu span.glyphicon { 
    font-size: 0.7em; 
} 
li.sub-menu:hover .dropdown-menu { 
    display: block; 
    top: 0; 
    left: 100%; 
} 

Вы можете увидеть этот рабочий пример здесь: http://codepen.io/anon/pen/amvavW

Вы должны прочитать документацию о том, как создавать выпадающее-меню с Bootstrap: http://getbootstrap.com/components/#dropdowns

Они имеют практические объяснения, поставляемые в комплекте с некоторыми кода и рабочих примеров.

Насколько я помню (поправьте меня, если я ошибаюсь): Bootstrap в настоящее время изначально не поддерживает N-уровней выпадающих меню, так что вы делаете вид использования их встроенную реализацию списка и добавить немного пользовательского CSS, чтобы получить больше уровней подменю, работающих так, как вы хотите.

Надеюсь, это поможет!