本文是利用css和html实现自适应于文本长度菜单。
实现后的效果图，如下：
实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
a{
display: block;
height:38px;
/* width:107px; */
/* line-height: 2; */
line-height: 38px;
text-align: center;
background: url(./c2.jpg) no-repeat 0px 0px;
color:#d84700;
font-size: 14px;
weight:bold;
text-decoration: none;
padding-left: 18px;
float:left;
margin:5px;
}
a span{
display: block;
background: url(./c2.jpg) no-repeat right 0px;
padding-right: 20px;
}
a:hover{
background: url(./c2.jpg) no-repeat 0px -38px;
}
a:hover span{
background: url(./c2.jpg) no-repeat right -38px;
}
</style>
</head>
<body>
<p><a href="#"><span>免费注册</span></a>
<a href="#"><span>登入</span></a>
<a href="#"><span>在网上开店</span></a></p>
</body>
</html>
原文：http://blog.csdn.net/j903829182/article/details/38775853