CSS 导航菜单的排版混乱，新手菜鸟请求帮助
我想把导航菜单栏的设计成这种排列：www.cestude.com/show.jpg
只所以在CSS里面用背景图像background-image是因为还想添加给链接一个HOVER效果，鼠标放在上面能切换菜单的图像。
但是我写的CSS排版非常混乱，且超链接无效。（混乱的页面见www.cestude.com首页。CSS源代码：www.cestude.com/mainstyle.css）请大家告诉我为什么会这样，帮我修改修改。多谢。
--------------------------------------------------------------
CSS
/* CSS Document */
/* Globle set */
body{margin:0;padding:0;background-color:#7c8373;}
/* Main content */
#wrapper {width:1000px;
margin:0px auto;}
#banner {width:1000px;
height:295px;
margin:20px auto 0px auto;}
/* Navigation style */
#nav{width:1000px;height:66px;
margin:0px auto;}
#nav-left {width:163px; height:66px; background-image:url(image/nav-left.jpg); float:left; background-repeat:no-repeat;}
#nav-main {width:631px; height:66px; float:left;}
#nav-right {width:206px;height:66px; background-image:url(image/nav-right.jpg);background-repeat:no-repeat; float:right;}
#banner-bottom {clear:both; width:1000px;margin:0px auto;height:94px; background-image:url(image/banner-bottom.jpg); background-repeat:no-repeat;}
/* content style */
#content-left {clear:both; width:163px; height:500px; background-image:url(image/content-left.jpg); background-repeat:repeat-y; float:left;}
#content {width:698px;height:500px; background-image:url(image/content-bg.jpg); background-repeat:repeat; float:left;}
#content-right {width:139px; height:500px; background-image:url(image/content-right.jpg); background-repeat:repeat-y; float:right;}
/* foot style */
#foot {clear:both;}
/* class style */
#nav-main ul li {display:inline-block;}
.nav-index {width:110px; height:66px; background-image:url(image/index.jpg);}
.nav-blog {width:106px; height:66px; background-image:url(image/blog.jpg)}
.nav-leavemessage {width:143px;height:66px; background-image:url(image/leavemessage.jpg)}
.nav-email {width:108px;height:66px; background-image:url(image/email.jpg)}
.nav-ackonwledgement {width:165px;height:66px; background-image:url(image/acknowledgement.jpg)}
.nav-index a:hover {width:165px;height:66px; background-image:url(image/go.jpg)}
---------------------------------------------
这是因为你没有重置ul标签的默认样式，不同浏览器中同一标签的默认样式不一定相同。
在css开头给常用标签重置样式
ul,li{margin:0;padding:0;list-style:none;}
另外#nav-main ul li {display:inline-block;}修改称#nav-main ul li {float:left}
处理链接失效
把<li>上的class都移动到内部的<a>标签上并加入display:block
鼠标移上去的效果
<a>标签的样式以首页的为例：
.nav-index {display:block;width:110px; height:66px; background-image:url(image/index.jpg);}
.nav-index:hover{width:165px; background-image:url(image/go.jpg)}
有问题的可以再找我
