web上使用css实现导航栏？

Question

1、如何实现导航栏就像http://chuangzaoshi.com/code左侧一样？
2、能用css完全实现吗？纯css怎么实现？js怎么实现？
谢谢！

ps：感谢两位大神的答案，我没说清楚，我的疑难如下：

左侧导航点击设计等大的标签会自动收起原来的，弹出现在的ul，同时右侧的内容又跟着变化。

这个如何实现不清楚，还望赐教。

Answer 1

你是要鼠标移动过去的变色效果吧？用CSS实现的话，左边用列表做，然后改样式，用:hover伪类去配鼠标移动过去的样式比如ul li {    ... // 此处为常规样式}ul li:hover {    ... // 此处为鼠标经过的样式}如果用JS实现的话，就要监听对应元素的鼠标进入事件onmouseenter，将列表的项目中除了当前项，其他的样式都设置为常规样式，还要监听元素的鼠标离开事件onmouseleave，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。