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;
 }

任何帮助或建议都将受到高度赞赏。日Thnx

Answer 1

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

Answer 2

您必须将样式定义为background: #4dafde none no-repeat scroll left middle，然后在每个background-image的{{1}}属性中覆盖style，否则您可能会有点狡猾： <li>具有固定的宽度，然后将一个背景图像应用于整个li，其中各个图像位于正确的位置（较大的文件，但通过适当的网络优化，差异应该是可忽略的，甚至是偏移的通过一个HTTP请求的好处而不是几个）。

Answer 3

jQuery可能就是你要找的东西

可在此处找到Css命令。

css command

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

nth-child info

水平菜单与每个李的不同背景图像

3 个答案: