每个 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

jQuery 可能就是你要找的东西

Css 命令可以在这里找到。

css command

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

nth-child info

Answer 2

您必须将样式定义为background: #4dafde none no-repeat scroll left middle，然后在每个style 属性中覆盖background-image <li>，或者您可能有点狡猾：使lis 具有固定宽度，然后将一张背景图片应用到整个.myMenu，其中在正确的位置有单独的图片（更大的文件，但通过适当的网络优化，差异应该可以忽略不计，甚至可以通过一个HTTP请求而不是几个的好处来抵消）。

Answer 3

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