Question

本人菜鸟级别，跪求大神帮忙，小的先在此谢过了。

打开默认的是这种样式，当用户点第二项时，第一项变小，第二项变为第一项的样式。其余项也同样道理。鼠标划过单击都变为大的白色背景 ，正常显示蓝色小背景。

Answer 1

给你讲下思路把：

1. 为a标签写个伪类a:hover{//这里写鼠标放上去的样式},这样鼠标划上去就有你要的效果了
   

2. a.current{//这里写鼠标点击后的样式} //这里需要跳转页面或者用js实现class转换，就是说点击哪个a标签，那这a标签就加current，其余a标签删除class="current"，这样鼠标点击后就切换样式了

   
   

追问

那每个li的宽和高不一样，单独设置width和height？还有打开是默认选择第一项“全部”选项 是怎么实现的？

追答

1. li的话可以不设宽高让其自适应，为li写padding将其撑大。
   

2. 在html里为“全部”选项的a加样式current，其余选项则不加，这样进来就是默认选择第一项。
   

Answer 2

这很简单的
li:hover{background:url(白色的背景)} //鼠标划过

点击就要用到js了

function clicks(){
var menu_li=document.getElementById("id");
menu_li.style.backgroundImage="url(白色的背景)"
}

由于是在这里敲上去的，请检查下单词拼写有没有错误哈