Подэлементы правого выравнивания с css

Question

Я не знаю, как делать с css, чтобы мои вспомогательные элементы были в правой части. Может кто-нибудь помочь?

.navbar-collapse { 
 
\t \t max-height: 400px; 
 
\t \t overflow-y: auto; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="collapse navbar-collapse"> 
 
\t \t \t \t \t <ul class="nav navbar-nav navbar-right"> 
 
\t \t \t \t \t \t <li><a href="#top">1</a></li> 
 
\t \t \t \t \t \t <li><a class="drop" href="#">2</a> 
 
\t \t    <ul> 
 
          <li><a href="#about">22</a></li> 
 
          <li><a href="#portfolio">222</a></li> 
 
\t \t \t \t  </ul> 
 
\t \t \t \t \t  </li> 
 
\t \t \t \t \t \t <li><a href="#service">3</a></li> 
 
\t \t \t \t \t \t <li><a href="#team">4</a></li> 
 
\t \t \t \t \t \t <li><a class="drop" href="#">5</a> 
 
\t \t \t \t \t \t <ul> 
 
          <li><a href="#about2">55?</a></li> 
 
          <li><a href="#team2">555</a></li> 
 
\t \t \t \t  </ul> 
 
\t \t \t \t \t  </li> 
 
\t \t \t \t \t \t <li><a href="#contact">6</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div>

Теперь мой суб элемент (22222 и 55555) находятся в нижней части (проверьте в полной странице).

Answer 1

Тонкое, что ul юг элемента (22222 и 55555) и a.dropdisplay: block есть просто заменить его на дисплее: рядный block` так:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<style> 
 
    .navbar-collapse { 
 
    max-height: 400px; 
 
    overflow-y: auto; 
 
    } 
 

 
    .sub-menu, 
 
    .nav>li>a{ 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 

 
    .sub-menu{ 
 
    padding-left: 20px;  
 
    } 
 
</style> 
 
    
 

 

 
<div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#top">1</a></li> 
 
     
 
     <li><a class="drop" href="#">2</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#about">22</a> 
 
       </li> 
 
       <li><a href="#portfolio">222</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     
 
     <li><a href="#service">3</a></li> 
 
     
 
     <li><a href="#team">4</a></li> 
 
     
 
     <li><a class="drop" href="#">5</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#about2">55?</a> 
 
       </li> 
 
       <li><a href="#team2">555</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     
 
     <li><a href="#contact">6</a> </li> 
 
    </ul> 
 
</div>

Смотрите в полном объеме страница т.к. .navbar-collapse имеет display: none bellow 768px;

Here working jsfiddle example

Если вы хотите ul в правой части только overrite стили бутстраповские для этого элемента, как это:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<style> 
 
    
 
    .navbar-collapse { 
 
    max-height: 400px; 
 
    display: block; 
 
    overflow-y: auto; 
 
    } 
 

 
    .sub-menu, 
 
    .nav>li>a{ 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 

 
    .sub-menu{ 
 
    padding-left: 20px;  
 
    } 
 
    
 
    
 
    /*overwrite the default styles of bootstrat bellow 768px*/ 
 
    .navbar-nav{ 
 
    float: right !important; 
 
    margin: 0; 
 
    } 
 

 
    .navbar-nav>li{ 
 
    float: left; 
 
    } 
 
    
 
</style> 
 
    
 

 
<div class="collapse navbar-collapse"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#top">1</a></li> 
 
     
 
     <li><a class="drop" href="#">2</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#about">22</a> 
 
       </li> 
 
       <li><a href="#portfolio">222</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     
 
     <li><a href="#service">3</a></li> 
 
     
 
     <li><a href="#team">4</a></li> 
 
     
 
     <li><a class="drop" href="#">5</a> 
 
      <ul class="sub-menu"> 
 
       <li><a href="#about2">55?</a> 
 
       </li> 
 
       <li><a href="#team2">555</a> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     
 
     <li><a href="#contact">6</a> </li> 
 
    </ul> 
 
</div>

Here the jsfiddle for the above