在图片上添加菜单html,图片菜单.html

无标题文档

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

ul,

ol {

list-style: none;

}

.nav {

width: 736px;

height: 78px;

border: 1px solid #f00;

margin: 50px auto;

}

.nav li {

float: left;

}

.nav li a {

display: block;

width: 100px;

height: 78px;

background: url(img/nav.png) no-repeat left top;

text-indent: -9999px;

overflow: hidden;

}

.nav li a:hover {

background-image: url(img/nav-on.png);

}

.nav .list2 a {

width: 124px;

background-position: -100px;

}

.nav .list3 a {

width: 146px;

background-position: -224px;

}

.nav .list4 a {

width: 120px;

background-position: -370px;

}

.nav .list5 a {

width: 124px;

background-position: -490px;

}

.nav .list6 a {

width: 122px;

background-position: -614px;

}

• 首页

• 首页

• 首页

• 首页

• 首页

• 首页

一键复制

编辑

Web IDE

原始数据

按行查看

历史