每个li具有不同背景图像的水平菜单

Question

我正在寻找可以有不同背景图像的嵌套菜单，下面是执行所有操作的代码，悬停时显示具有不同颜色的子节点，但我希望每个链接有不同的背景图像，并为子节点提供单独的图像。目前它使用颜色。 （链接的每个图像的大小会有所不同）

 <div class="TopMenu"> 
    <ul class="myMenu"> 
        <li><a href="Home.aspx">Home</a></li> 
        <li><a href="About-Us.aspx">About us</a></li> 
        <li><a href="Products-For-Sale.aspx">For sale</a>
                <ul>
                    <li><a href="Bedsheets-For-Sale.aspx">Bedsheets</a></li>
                    <li><a href="Rugs-For-Sale.aspx">Rugs</a></li>
                    <li><a href="Accessories-For-Sale.aspx">Accessories</a></li>
                </ul>
                </li> 

        <li><a href="News.aspx">News</a></li> 
        <li><a href="Services.aspx">Services</a></li> 

    </ul> 
 </div><!--TopMenu--> 

/*style the main menu*/
  #header .myMenu {
margin:0px;
padding:0px;
list-style:none;
 text-transform:uppercase;
position:absolute;
 z-index:300;
 left:28px;
 top:108px;
 width:952px;
   }

#header .myMenu li
{
  list-style: none;
  float: left;
  background-color: #4dafde;
  line-height: 25px;
  margin-right: 3px;
  }

 #header .myMenu li a:link, .myMenu li a:visited
{
display: block;
text-decoration: none;
background-color: #4dafde;
padding: 0.5em 2em 0.5em 2em;
margin: 0 0 0 0;

}

#header .myMenu li a:hover {
background-color: #A4D6EE;
}



/*style the sub menu*/
#header .myMenu li ul
  {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background-color: #4dafde;
}

#header .myMenu li ul li {
display:inline;
float:none;
 }

#header .myMenu li ul li a:link, .myMenu li ul li a:visited
{
display:block;
width: auto;
text-decoration: none;

 }

  #header .myMenu li ul li a:hover
 {
background-color: #A4D6EE !important;
 }

任何帮助或建议将不胜感激。 谢谢

Answer 1

您必须：
答：为每个 LI 添加唯一的 ID，然后在 CSS 中为该 LI 添加背景图像
B：使用 CSS3 选择器 :nth-child 选择 LI，然后以这种方式应用背景图像。

Answer 2

您必须将样式定义为 background: #4dafde none no-repeatscroll left middle 然后覆盖 style 属性中的 background-image每个

，或者您可以更巧妙一些：使 li 具有固定宽度，然后将一张背景图像应用到整个 。 myMenu 包含单独的图像在正确的位置（更大的文件，但通过适当的 Web 优化，差异应该可以忽略不计，甚至可以被一个 HTTP 请求相对于多个请求的好处所抵消）。

Answer 3

jQuery 可能就是您正在寻找的

Css 命令，可以在这里找到。

css 命令

使用 nth-child 查找 ul 父元素的某些子元素

nth-child 信息