Question

我需要一些帮助。我正在尝试仅使用CSS和HTML进行水平导航。我不想将菜单标签作为图像，以防将来发生变化。我有大部分工作，但问题是当我尝试为其中一个LI包含一个图标（图像）。我希望图标也可以换掉。到目前为止，这是我的代码：

CSS：

body {
padding: 50px;
margin: 0;
}

ul {
padding: 5px;
margin: 10px 0;
list-style: none;
background-color: #fff;
float: left;
clear: left;
}

ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 9px;
}

ul li a {
text-decoration: none;
float:left;
color: #111;
cursor: pointer;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}

ul li a span {
margin: 0px 10px 0px -10px;
padding: 1px 4px 1px 14px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}

ul.green li a:hover  {
color: #fff;
background: url(images/green.png) no-repeat top right;
}

ul.green li a:hover span {
background: url(images/green.png) no-repeat top left;
}

ul.green li.home {
color: #111;
background: url(images/home-idle.png) no-repeat;
background-position: -1px;
padding-left: 18px;
}

ul.green li.home a:hover {
background: url(images/home-over.png) no-repeat -10px;
}

HTML：

<ul class="green">
   <li class="home"><a href="#" title="Home"><span class="home">Home</span></a></li>
   <li><a href="#" title="Archives"><span>Archives</span></a></li>
   <li><a href="#" title="Rooms and Resources"><span>Rooms &amp; Resources</span></a></li>
   <li><a href="#" title="Productivity"><span>Productivity</span></a></li>
   <li><a href="#" title="Get Training"><span>Get Training</span></a></li>
   <li><a href="#" title="FAQs"><span>FAQs</span></a></li>
</ul>

就像我说的那样，我正在尝试做的事情已经发生了：

使用CSS进行导航（除了图标和背景）
将背景更改为绿色圆角矩形（我用了一个 .png图片为背景）
将主页图标从蓝色更改为白色

如果有人可以提供帮助，请告诉我。

CSS：灵活宽度翻转水平列表

0 个答案: