Ошибка кнопки CSS Rollover

Question

Я пытаюсь создать кнопку выпадающего меню, и она почти работает, за исключением одной маленькой ошибки. У меня есть несколько больших кнопок, которые меняют цвет фона, когда пользователь наводит на них курсор, и одна из них, языковая кнопка, отображает несколько подопций внутри себя, когда пользователь наводит курсор на него. Это все работает нормально, за исключением того, что языковая кнопка не меняет цвет фона, когда пользователь наводит курсор на нее. Он меняет свой цвет, если курсор находится внутри кнопки, но не касается 3 дополнительных параметров. Что мне нужно, так это техника или правило, которое гласит, что кнопка изменит цвет фона, если пользователь наведет курсор на него или если пользователь наведет курсор на один из его дочерних элементов. Как мне этого добиться? Вот разметка:

   <ul>
                            <li><a href="/home/" title="Go to the Home page" class="current"><span>Home</span></a></li>
                            <li><a href="/about-us/" title="Go to the About Us page" class="link"><span>About us</span></a></li>
                            <li><a href="/products/" title="Go to the Products page" class="link"><span>Products</span></a></li>
                            <li><a href="/services/" title="Go to the Services page" class="link"><span>Services</span></a></li>
                            <li><a href="/news/" title="Go to the News page" class="link"><span>News</span></a></li>
                            <li><a href="/dealers/" title="Go to the Dealers page" class="link"><span>Dealers</span></a></li>
                            <li id="Rollover"><a href="" title="select language" class="link"><span>Language</span></a>
                                <ul>
                                    <li><a href="/english/">English</a></li>
                                    <li><a href="/french/">French</a></li>
                                    <li><a href="/spanish/">Spanish</a></li>
                                </ul>
                            </li>
                            <li><a href="/contact-us/" title="Go to the contacts page" class="link"><span>Contact us</span></a></li>
                        </ul>

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

Answer 1

Вы можете попробовать использовать небольшой javascript для добавления класса при наведении курсора. Если бы вы использовали библиотеку сценариев, такую ​​как jQuery, это было бы что-то вроде этого:

$('#rollover').hover(function(){
         $(this).addClass('hover');
       },function(){
         $(this).removeClass('hover');
       });
$('#rollover a').hover(function(){
         $(this).parent("#rollover").addClass('hover');
       },function(){
         $(this).parent("#rollover").removeClass('hover');
       });

этот код не протестирован, поэтому может потребоваться настройка или два, но это также должно исправить любые ошибки CSS, которые появляются в IE (при условии, что вы используете меню типа suckerfish)

Answer 2

Если ваше правило опрокидывания находится на теге <a>, это не будет работать, поскольку подопции на самом деле не являются дочерними элементами привязки, они являются дочерними элементами #Rollover. Это должно работать:

#Rollover:hover{background-color:<your color here>}