горизонтальное меню с различным фоновым изображением для каждого 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;
 }

Любая помощь или предложение будут высоко оценены.Thnx

Answer 1

Вам также придется:
A: Добавьте уникальный идентификатор для каждого LI, затем в своем CSS добавьте фоновое изображение для этого LI.
B: Используйте селектор CSS3: nth-child, чтобы выбрать LI, затем примените фоновое изображение таким образом.

Answer 2

Вам нужно будет либо определить стиль как background: #4dafde none no-repeat scroll left middle, а затем переопределить background-image в атрибуте style каждого <li>, либо вы можете быть немного хитрее: сделать li s фиксированной ширины. , затем примените одно фоновое изображение ко всему .myMenu, в котором отдельные изображения находятся в нужных местах (больший файл, но при правильной веб-оптимизации разница должна быть незначительной, даже компенсируемой преимуществом одного HTTP-запроса над несколькими). ​​

Answer 3

jQuery может быть тем, что вы ищете

Команда Css может быть найдена здесь.

Команда CSS

Используйте nth-child длянайти определенные дочерние элементы родительского элемента ul

информация nth-child