вертикальная панель навигации с помощью CSS самозагрузки

Question

Я пытаюсь сделать вертикальную панель навигации, я использую самозагрузки 3.0,

Я искал для любого примера и может найти только this

<ul> 
<li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
    <ul> 
    <li><a href="#">History</a></li> 
    <li><a href="#">Team</a></li> 
    <li><a href="#">Offices</a></li> 
    </ul> 
</li> 
<li><a href="#">Services</a> 
    <ul> 
    <li><a href="#">Web Design</a></li> 
    <li><a href="#">Internet 
     Marketing</a></li> 
    <li><a href="#">Hosting</a></li> 
    <li><a href="#">Domain Names</a></li> 
    <li><a href="#">Broadband</a></li> 
    </ul> 
</li> 
<li><a href="#">Contact Us</a> 
    <ul> 
    <li><a href="#">United Kingdom</a></li> 
    <li><a href="#">France</a></li> 
    <li><a href="#">USA</a></li> 
    <li><a href="#">Australia</a></li> 
    </ul> 
</li> 
</ul> 

Но я не совсем хочу, что я хочу, это что-то вроде этого

Я новичок в CSS и нашел что-нибудь.

http://jsfiddle.net/CF5PQ/2/

Может кто-нибудь пожалуйста помочь Спасибо заранее.

Answer 1

Для начала .. Вы должны стилизовать ваши списков, как это:

ul li { 
    /* styles for first level */ 
    background: #fff; /* white bg */ 

} 

ul li ul li { 
    /* styles for second level */ 
    background: #ccc; /* grey bg */ 
} 

Answer 2

Вы ищете для нескольких колонного меню, насколько я понимаю, вы можете получить его с некоторыми ухищрениями.

<ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me!</a> 
      <div class="dropdown-menu multi-column"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Top Left</a></li> 
         <li><a href="#">Bottom Left</a></li> 
        </ul> 
       </div> 
       <div class="col-md-6"> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Top Right</a></li> 
         <li><a href="#">Bottom Right</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </li> 
</ul> 

И вы должны добавить некоторые правила для получения нескольких колонных видимостей

.dropdown-menu.multi-column { 
     width: 250px; /*Set manually according to menu text and column count*/ 
} 

.dropdown-menu.multi-column .dropdown-menu { 
     display: block !important; 
     position: static !important; 
     margin: 0 !important; 
     border: none !important; 
     box-shadow: none !important; 
     min-width:100px; 
} 

Вот скрипка: http://jsfiddle.net/5NfxT/1/

Это для двух колонных меню. Для более того вы должны изменить классы divs «col-md-*», а также значение ширины .dropdown-menu .multi-column правило.

<div class="col-md-6"> 

Как вы знаете, Bootstrap использует сетку, которая делит экран на 12 столбцов. для меню из 3-х столбцов вы должны использовать col-md-4, а для 4-х столбчатых меню используйте col-md-3.

Еще один момент, если вы увеличиваете количество столбцов, вам также необходимо расширить панель выпадающего меню.