Pure CSS Multilevel Menu

This part of the final results of the finished product is amazing, that is, the legendary pure CSS level six menu. The most powerful part of this thing is compatible with all major browsers (IE6,IE8,MAXTHON2.5,FIREFOX3.5,OPERA10,SAFARI4 and Chrome2), while a little CSS hack is useless. After all, CSS hack is only a stopgap, palliative, who knows it will be a future version of the browser has any side effects, so can not use it. Since the structure is very regular, the reader can expand to a level 10 menu after careful study.

Shizuki CSS Multilevel Menu

Because IE6 can support a poor number of pseudo-classes, only supports the hover and visited of a element and active. To show the hidden level two menu, we had to put the unordered list of the level two menu under the a element, but that's where Firefox went. At this point we have to ask for the conditions of IE comments, so that the page under the IE6 to render a set of structural layers, in other browsers to render another set.

  <p class= "Menu" > <ul> <li> <a href= "http://www.cnblogs.com/rubylouvre/" > Menu three <!- -[if! IE 6]><!--></a><! [endif]--> <ul> <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _11</a>&lt ;/li> <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _12</a></li> </ul > <!--[if LTE IE 6]></a><! [endif]--> </li> <li> <a href= "http://www.cnblogs.com/rubylouvre/" > Menu two <!--[if! IE 6]><!--> Two </a><! [endif]--> <ul> <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _11</a>&lt ;/li> <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _12</a></li> </ul > <!--[if LTE IE 6]></a><! [endif]--> </li> <li>//************ slightly *********** </li> <li>//************ *********** </li> </ul> </p> 

But this does not make the IE6 level two menu bounce out, this situation I encountered in the pure CSS album many times. Check the foreign data, said that IE with hover switch absolute positioning sub-elements when there are problems, but the specific situation is divided into many kinds, the solution is also different. But for multi-layered sub-elements of multi-level menus, the most common approach is to put them in a table, which is equivalent to the table layout. Because table has the strongest fault tolerance, and many people have been using it to layout, the browser has been enhancing its advantages in this area. Thanks to table, we finally packed up IE6 this freak.

<p class= "Menu" > <ul> <li> <a href= "http://www.cnblogs.com/rubylouvre/" > Menu <!--[i F! IE 6]><!--><strong> a </strong></a><! [endif]--> <table><tr><td> <ul> <li><a href= "http:/ /www.cnblogs.com/rubylouvre/"> Level two menu _11</a></li> <li><a href=" http://www.cnblogs.com/ Rubylouvre/"> Level two menu _12</a></li> </ul> </td></tr></table> & lt;! --[if LTE IE 6]></a><! [endif]--> </li> <li> <a href= "http://www.cnblogs.com/rubylouvre/" > Menu <!--[if! IE 6]><!--><strong> two </strong></a><! [endif]--> <table><tr><td> <ul> <li><a href= "http:/ /www.cnblogs.com/rubylouvre/"> Level two menu _11</a></li> <li><a href=" hTtp://www.cnblogs.com/rubylouvre/"> Level two menu _12</a></li> </ul> </td></tr>& lt;/table> <!--[if LTE IE 6]></a><!        [endif]--> </li> <li>//************* ************** </li> <li> Slightly ************** </li> </ul> </p>

However, Firefox and other browsers add a lot of redundant structure layer code, they basically do not need table this thing can work well. Therefore, we put the table in the IE conditional comment. Such as:

<p class= "Menu" >    <ul>      <li>        <a href= "http://www.cnblogs.com/rubylouvre/" > Menu        <!--[if! IE 6]><!--><strong> a </strong></a><! [endif]-->        <!--[if LTE IE 6]><table><tr><td><![ endif]-->        <ul>          <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _11</a> </li>          <li><a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _12</a></li>        </ul>        <!--[if LTE IE 6]></td></tr></table></a><![ endif]-->      </li>      <li>        //************* slightly ************      </li>      <li >        //************* slightly ************      </li>      <li>       //************* ************      </li>    </ul>  </p>

However, the structural layer can be further streamlined. At the same time we should be aware of the unusual height of the IE6 horizontal menu, which is that the LI element of IE6 will have a 5px void when it contains block-level display elements. Because the LI element contains a complex structure, several methods previously used to deal with the IMG element are not feasible. We can explicitly set the height of the a element so that the extra parts are hidden away. This is the only way to use CSS hack.

The more streamlined fabric layer:

 <p class= "menu" > <ul> <li> <!--[if LTE IE 6]><a href= "" ><table><tr><td><! [endif]--> <a href= "http://www.cnblogs.com/rubylouvre/" > Menu one </a> <ul> <li> ; <a href= "http://www.cnblogs.com/rubylouvre/" > Level two menu _11</a></li> <li><a href= "http://www . cnblogs.com/rubylouvre/"> Level two menu _12</a></li> </ul> <!--[if LTE IE 6]></td>< ;/tr></table></a><! [endif]--> </li> <li>//*********** ********* </li> <li>// Slightly ********* </li> <li>//*********** ********* </li> </ul> &L T;/p> 

    . Menu a {      display:block;      /*position:relative, found in the A element, in      the standard browser is miserable,      and pure CSS album 3 of the first run box in Chrome encountered the same bug */      height:32px;      width:100px;      line-height:32px;      Background: #a9ea00;      Color: #ff8040;      Text-decoration:none;      Text-align:center;      overflow:hidden;/*★★★★*/    }

Based on the structure above, we can develop multi-level sub-menus.

Then we find that under IE6, when we move the mouse over the level two menu, the first menu item will appear a border with a color of hover background. Between ie6,table and Cells (cellspacing), there is a gap between the cell and the contents of the cell (cellspadding), and the background color is transparent, meaning that the background color of the next layer is always displayed. Since we set the display:block of a, it will fill all of TD's space, so the mysterious border should be cellspacing. We can confirm my conjecture in the following way.

    . menu Table {      border:1px solid aqua;    }    . Menu Table td{      border:1px solid aqua;    }

Knowing where the problem is, we can do the right thing. There are two workarounds. One is to set cellspacing equal to zero. Because cellspacing is a DOM attribute, non-CSS property, in other words, how many table we have to write. The second is to set Border-collapse to collapse, because this will be the table and the TD border inside it into one, so that the gap between them no longer exist. We certainly choose the second kind.

    . menu Table {      border-collapse:collapse;    }

Finally, summarize:

• When hover is guaranteed, the top and left of the corresponding submenu are within the range of the containing block.

• Usually we use hover to invoke the display implementation of the child elements of the looming, but in IE6, mouseout after it will not disappear, you have to change visibility battle.

• Some browsers use a:hover to toggle absolute positioning of child elements there is a bug, unified with Li:hover implementation.

• In IE6, when you activate the a:hover of a parent element and then call the a:hover of its descendant element, there is no response, in other words, to not continue rendering downward. At this point we need table, the most fault-tolerant tag.

• In order to cross-platform needs, we need to use the IE conditional annotation to switch the corresponding structure layer code.

• In IE6, when the LI element contains a display block element (such as a) will be 5px more, we can use Overflow:hidden to clean up.

• In IE6, table and TD are gaps, and when we move a submenu item, its parent menu item will be infected with two edges because of these transparent spaces. Workaround: Set the border-collapse of table to collapse.