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

标签 jquery html css twitter-bootstrap

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

但我并不完全想要这个,我想要的是这样的东西 enter image description here

我是 CSS 的新手,可以找到任何东西。

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

谁能帮忙 提前致谢。

最佳答案

为了让你开始......你必须设计你的风格 列表如下:

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

}

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

关于jquery - 使用 CSS bootstrap 的垂直导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20581387/

相关文章:

javascript - 如何使用 "fixed" header 使 anchor 标记直接指向页面上的正确位置?

javascript - jQuery find() 方法不适用于一个(!)类

javascript - Ajax多次提交表单

CSS - 为响应式设计集中 UL

jquery - 使用 jquery 插件在 Rails 3 中显示日期字段

jquery - 如何从砖石图片库中删除空白

html - flex-grow 在列布局中不起作用

javascript - 如何使用谷歌图表在下拉选择中获取选定的图表类型

html - 我可以用 CSS 实现元素的垂直环绕吗?

c# - 如何使用十六进制为图像着色?