HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航翻转功</title>
<link href="test2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li id="blogger"><a href="www.baidu.com" ><strong>my</strong> blogger</a></li>
<li id="google"><a href="www.google.com"><strong>my</strong> google</a></li>
<li id="sogou"><a href="www.sogou.com"><strong>my</strong> sogou</a></li>
<li id="cto"><a href="www.jb200.com"><strong>my</strong> 51cto</a></li>
</ul>
/*id属性的名称的命名规则，是不能数字开头。*/
</body>
</html>
CSS代码如下：
1 去掉无序列表前面的加点默认圆点和内外边距。
4. 给a标记添加背景图片。
5. 设置鼠标经过时，链接字体的颜色。
完成,测试一下效果。