用图片做导航栏

					<ul class="index-nav">
						<li id="myimg1">
							<a href="index.html">
								<div></div>
							</a>
						</li>
						<li id="myimg2">
							<a href="breadintro.html">
								<div></div>
							</a>
						</li>
						<li id="myimg3">
							<a href="dishes.html">
								<div></div>
							</a>
						</li>
						<li id="myimg4">
							<a href="probase.html">
								<div></div>
							</a>
						</li>
						<li id="myimg5">
							<a href="join.html">
								<div></div>
							</a>
						</li>
						<li id="myimg6">
							<a href="stores.html">
								<div></div>
							</a>
						</li>
						<li id="myimg7-hover">
							<a href="contact.html">
								<div></div>
							</a>
						</li>
					</ul>

　　

#myimg1 a div {
	background: url(../images/common/shouye.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg1:hover a div {
	background: url(../images/common/shouye-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg2 a div {
	background: url(../images/common/pinpai.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg2:hover a div,
#myimg2-hover a div {
	background: url(../images/common/pinpai-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg3 a div {
	background: url(../images/common/tese.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg3:hover a div,
#myimg3-hover a div {
	background: url(../images/common/tese-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg4 a div {
	background: url(../images/common/shengchan.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg4:hover a div,
#myimg4-hover a div {
	background: url(../images/common/shengchan-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg5 a div {
	background: url(../images/common/zhaoshang.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg5:hover a div,
#myimg5-hover a div {
	background: url(../images/common/zhaoshang-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg6 a div {
	background: url(../images/common/qixia.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg6:hover a div,
#myimg6-hover a div {
	background: url(../images/common/qixia-1.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg7 a div {
	background: url(../images/common/lianxi.png) 0 0 no-repeat;
	background-size: cover;
}

#myimg7:hover a div,
#myimg7-hover a div {
	background: url(../images/common/lianxi-1.png) 0 0 no-repeat;
	background-size: cover;
}