DIV+CSS制作菜单流程

最近看了《功夫熊猫2》刚刚开始就是猫猫大师的inner pease，很多事情静下心来也去掉浮躁的一层。本质很简单，ul li 制作去掉浮躁本质很简单。菜单就有所动作，有链接。链接就要理解链接的几个状态，做ul li 菜单相对就容易了。链接未访问前的样式（a：link），鼠标移动到链接上的样式（a：hover），鼠标左键按下的样式（a：active），鼠标左键弹起过后的样式（a：visited）。

1,把菜单放在一个div中。

<div id="menu">

<ul>

<li><a href="#">首页</a></li>

<li><a href="#">计算机</a></li>

<li><a href="#">阳光驾校</a></li>

<li><a href="#">好好学习</a></li>

</ul>

</div>

2,由于ul的默认边距不是0px,且列表前面还有默认的圆点故第二步骤应该设置ul的边距和列表样式.

/*设置列表的边距和去掉列表样式*/

#menu ul{

margin:0px;

padding:0px;

list-style:none;

}

3,设置列表的行高和分割线.

/*设置列表的行高和分割线*/

#menu li{

line-height:22px;

border-bottom:#cdcdcd 1px solid;

}

4,设置链接样式(去掉下划线,设置背景色,设置边距(左边距),转换成块级元素)

#menu li a,#menu a:visited{

display:block;/*转换成块级元素*/

padding-left:12px;

background-color:#285577;

text-decoration:none;

color:#000000;

}

5,设置鼠标移动到链接上的样式,

/*鼠标移动到链接上的样式*/

#menu li a:hover{

background-color:#6CAAD9;

color:#FFFFFF;

}

大致流程就是这样,当然还可以设置更多的属性,如果有图片可以换成背景图片更好看!