jquery - 使用 CSS bootstrap 的垂直导航栏

Question

我正在尝试制作一个垂直导航栏，我使用的是 bootstrap 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 */ 
}