html怎么把图片当作导航栏,css利用一张背景图制作导航菜单实现思路及代码

今天介绍的这款简单非常简单，利用一张背景图片来实现菜单的悬停状态。我们看下面的图片：

仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果。我们该如何做呢？看下面的图片：

 

这是一个示意图。最底层是ul，这是一个容器，我们将列表项li全部置入其中。为了方便说明，示意图中仅画了一个li。实际此例中有六个li，全部向左浮动，实现横行排列。在li上面还有链接a标签。

我们首先整理XHTML代码：

Example Source Code

复制代码代码如下:

• 财经
• 商业
• 管理