当鼠标悬停在下拉菜单上时，选中鼠标悬停模式

How could I have the tab to be on hover mode while I rollover the drop down sub-menu. Does it require javascript or it could be done solely on CSS?

当我翻转下拉子菜单时，我怎么能让标签处于悬停模式。它需要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>

2 个解决方案

#1

As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.

正如matpol建议的那样，您可以使用css来完成它，并使用css悬停修复程序在IE中对其进行排序。

As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)

作为旁注，你不需要那里的div，你可以通过设置嵌套的li元素来完成你需要做的所有样式（你也需要关闭第二个ul）。我猜它只是一个快速完成的代码片段，但我想我会把它拿出来:)

Update;

更新;

Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).

对于下拉列表而言，你应该不需要那个级别的div（如果你需要，你可以将它们放在

中）。

Something like this...

这样的东西......

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

Its untested, but I've done more of these than I'd care to remember :P

它未经测试，但我做了更多这些比我想要记住的：P

#2

you can do it with CSS but need JS for older crappier browsers(ie6) e.g.

你可以用CSS来做，但需要JS用于较旧的浏览器（即6），例如

li .column{
   display: none;
}

li:hover .column{
   display: block
}

IE6 only supports hover on anchor tags hence the need for JS.

IE6仅支持在锚标签上悬停，因此需要JS。

#1