Вкладка в режиме наведения при наведении мыши на выпадающее меню

Question

Как сделать так, чтобы вкладка находилась в режиме наведения, когда я переключаю выпадающее подменю. Требуется ли JavaScript или это может быть сделано исключительно на CSS?

 <li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
                <div class="column">                    
                    <ul>
                        <li class="subtitle">Button 1</li>
                        <li class="subtitle">Button 2</li>
                        <li class="subtitle">Button 3</li>
            </div>        
        </li>

Answer 1

Как предложил matpol, вы можете использовать css для этого и использовать css hover fix для сортировки в IE.

Как примечание: вам не нужен этот div, все, что вам нужно сделать в стиле, можно сделать, стилизовав вложенный элемент li (вам также нужно закрыть второй ul). В любом случае, я предполагаю, что это всего лишь быстро сделанный фрагмент кода, но я подумал, что подниму его:)

Update;

Как бы то ни было, мега выпадающий список, вам не нужны дивы на этом уровне (вы можете поместить их в <li>, если вам нужно).

Как то так ...

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a>
  <ul class="column">
    <li class="subtitle">Button 1</li>
    <li class="subtitle">Button 2</li>
    <li class="subtitle">Button 3</li>
  </ul>        
</li>

/* styles */


li#anchor:hover {
  /* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}

li#anchor ul.column {
  display: none; 
  /* Styles for this ul, float, position etc */
}

li#anchor:hover ul.column { 
  display: block;
}

Это не проверено, но я сделал больше, чем хотел бы вспомнить: P

Answer 2

вы можете сделать это с помощью CSS, но вам нужен JS для более старых, более крутых браузеров (т.е. 6), например,

li .column{
   display: none;
}

li:hover .column{
   display: block
}

IE6 поддерживает только наведение на теги привязки, поэтому необходима JS.