Have Geek Brain

Tab in hover mode when mouse is displayed above the dropdown menu

How can I enable the tab in hover mode when I flip the dropdown submenu. Does it require javascript, or can it be done purely in 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


a source to share


2 answers


As matpol suggested, you can use css for this and use the css hover fix for sorting in IE.

As a side note, you don't need this div, whatever you need to style can be done by styling the nested li element (you also need to close the second ul line). Anyway, I am guessing this is just a snippet of code made, but I thought I would lift it :)

Update

Tbh, however you choose mega, you don't need divs at this level (you can put them in <li>

if you need to).



Something like that...

<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 did more than I would like to remember: P

0


a source


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

li .column{
   display: none;
}

li:hover .column{
   display: block
}


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

0


a source






More articles:


All Articles