Влияет на фоновое изображение родительского элемента в CSS / HTML? - PullRequest
Новая
       14

Влияет на фоновое изображение родительского элемента в CSS / HTML?

0 голосов
/ 27 июня 2011

Я пытаюсь создать прокручиваемое меню в HTML / CSS и испытываю досадную проблему ... Я использовал следующий учебник для создания моего меню: http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs7

Моя проблема: ВклПри наведении указателя мыши фоновое изображение моей кнопки навигации меняется, и появляется выпадающее меню - пока что это хорошо - но когда вы перемещаете указатель в раскрывающееся меню, изображение кнопки навигации возвращается к своему первому состоянию.Я пытаюсь сохранить то же изображение, поэтому раскрывающееся меню будет выглядеть так, как если бы оно принадлежало навигационной кнопке (поскольку оно действительно ...)

Вот как выглядит код наHTML: 

    <ul id="nav_menu"><li id="nav_button"><a href="#">Products</a>
         <ul>
                    <li id="submenu"><a href="#">Product 1</a></li>
                    <li id="submenu"><a href="#">Product 2</a></li>
                    <li id="submenu"><a href="#">Product 3</a></li>
                    <li id="submenu"><a href="#">Product 4</a></li>
         </ul>
    </li></ul>

И в CSS: 

    #nav_button a {
    display:block;
    background-image:url(img1.jpg);
    background-repeat:no-repeat;
    }


#nav_button a:hover {
          display:block;
    background-image:url(image2.jpg);
    background-repeat:no-repeat;
      }

    #nav_button ul {
        display:none;
    }


    #nav_menu li:hover ul {
              display:block;
                }

        #submenu a  {
            background-image: none;
        }

Я понимаю, что проблема заключается в "background-image: none" в моем # submenu a, которое фактически влияетвсе в моем коде ... Так как в CSS нет родительского селектора;К сожалению, я не могу изменить кнопку навигации из выпадающего списка.

Знаете ли вы, как это сделать?Думаю, ответ не так уж и сложен, но я бы очень признателен за помощь!

Заранее спасибо!D.

Ответы [ 2 ]

0 голосов
/ 27 июня 2011

Моя ставка: вы меняете изображение ссылки, которая содержит подменю. Когда вы наводите указатель мыши на подменю, вы больше не находитесь на <a>, я думаю, вам следует изменить высоту элемента <a>, чтобы адаптировать одно из подменю при его отображении. Было бы лучше, если бы вы дали фоновое изображение для <li> вместо того, чтобы, я думаю.

0 голосов
/ 27 июня 2011

Попробуйте это ... 

#nav_button a:hover, #nav_button:hover > a {
    background-image: url(image2.jpg);
    background-repeat: no-repeat;
}

вместо ... 

#nav_button a:hover {
    display: block;
    background-image: url(image2.jpg);
    background-repeat: no-repeat;
}

Демонстрация с использованием цветов вместо изображений: http://jsfiddle.net/wdm954/gwjmK/1/

...