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，在鼠标离开时需要将之前鼠标经过时设置的样式恢复成常规样式。