Here is the concise version, the main [show/hide] effect to peel out for everyone to study.
The main use of the a:hover[ie],li:hover[is not IE] state to make the display/hidden menu effect.
The key points:
Program code
<!--[if IE 7]><!--></a><!--<! [endif]-->
This section of the note says: Only non-IE browsers and IE7 can read to </a>
In this way, the HTML read in non IE browsers and IE7 versions of browsers is:
Program code
<li><a href= "#" > Navigation </a>
<ul><li> Level Two navigation </li></ul>
</li>
Program code
<!--[If LTE IE 6]></a><! [endif]-->
This section of the annotation represents: only IE6 and IE6 the following version of the browser can read to </a>
The HTML read in the IE6 and IE6 browsers are:
Program code
<li><a href= "#" > Navigation
<ul><li> Level Two navigation </li></ul>
</a>
</li>
Some friends may ask: why to make so complicated, and not all use the link to contain two level list, so just write a:hover on it, the code is much simpler.
Personally, I think:
Play the standard to follow the semantics as much as possible.
In IE6 and the following versions, because it does not support hover pseudo classes that are marked outside of a, this is the only way to achieve a similar goal, IE6 ... Had to give up semantics.
But we do not for a IE6 and broken the whole pot of soup oh, so some things although a bit troublesome, but still have to do ~
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title> pure CSS menu </title> <style type=" Text/css "> <!--/* PR 50198763 * * {font-family: "Song body"; margin:0;padding:0;} body {padding:15px;} /* Set table width, Border 0, (IE6)/. Nav ul table {width:100%;border-collapse:collapse;border:0;} /* Default hidden Next level UL list. Nav ul li ul {display:none} * * When the mouse passes show the next level of UL list. Nav UL Li:hover ul, Nav ul Li A:hover ul display:block;width:100%; /* long time no play ... Results do not know what went wrong, not bold is not. Who has in-depth study of the drop please explain ~ Thank you * * * Nav li a:hover {font-weight:bold;} /* ====================== above for key attributes ====================== * * * ====================== below you are free to play ====================== * /////////////////* NAV {_width:720px;min-width:720px . Nav li {float:left;width:120px;display:block;font-size:0;border:solid #ccc; border-width:1px 0;_border:0;} . Nav Li a {width:120px;display:block;height:16px;padding:5px 0 1px;_border:solid #ccc; _border-width:1px 0;font-size : 12px;text-align:center;color: #555; Text-decoration:none;background: #f7f7f7;} . Nav li:hover A,. nav li a:hover {font-weight:bold;color:red;} . Nav li:hover li {border:0;} . Nav Li Li A,. Nav li:hover li a {_border:0;font-weight:normal;color: #555;} . Nav Li Li a:hover {color:red;font-weight:normal;} --> </style> </pead> <body> <div class= "nav" > <ul> <li class= "Up" > Home <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>111112</li> <li>111112</li> <li>111112</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 2 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>222221</li> <li>222221</li> <li>222221</li> </ul> </td></tr></ table><!--[If LTE IE 6]><! [endif]--> </li> <li> Navigation 3 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>333331</li> <li>333331</li> <li>333331</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 4 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>444441</li> <li>444441</li> <li>444441</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 5 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>555551</li> <li>555551</li> <li>555551</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 6 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>666661</li> <li>666661</li> <li>666661</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Note that the inside is segmented, [free play]. I first to play a ~ (originally did not pay attention to compatibility, now compatible ...) ）
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title> pure CSS menu </title> <style type=" Text/css "> <!--/* PR 50198763 * * {font-family: "Song body"; margin:0;padding:0;} body {padding:15px;} /* Set table width, Border 0, (IE6)/. Nav ul table {width:100%;border-collapse:collapse;border:0;} /* Default hidden Next level UL list. Nav ul li ul {display:none} * * When the mouse passes show the next level of UL list. Nav UL Li:hover ul, Nav ul Li A:hover ul display:block;width:100%; /* long time no play ... Results do not know what went wrong, not bold is not. Who has in-depth study of the drop please explain ~ Thank you * * * Nav li a:hover {font-weight:bold;} /* ====================== above for key attributes ====================== * * * ====================== below you are free to play ====================== * /////////////////* NAV {_width:720px;min-width:720px . nav {float:left;_height:22px;min-height:22px;border:solid #ccc; Border-width:1px 0;} . nav li {float:left;width:120px;display:block;font-size:0;} . Nav Li a {width:120px;display:block;height:22px;line-height:22px;font-size:12px;text-align:center;color: #555; Text-decoration:none;background: #f7f7f7;} . Nav li:hover A,. nav li a:hover {border-bottom:0;background: #eee; font-weight:bold;color:red;} . Nav Li:hover Li A,. Nav li a:hover A {color: #555; background: #f7f7f7; font-weight:normal;border-bottom:0;} . Nav li:hover li A:hover,. Nav li a:hover a:hover {background: #fff; color: #333;} --> </style> </pead> <body> <div class= "nav" > <ul> <li class= "Up" > Home <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>111112</li> <li>111112</li> <li>111112</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 2 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>222221</li> <li>222221</li> <li >222221</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 3 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>333331</li> <li>333331</li> <li>333331</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 4 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>444441</li> <li>444441</li> <li>444441</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> <li> Navigation 5 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>555551</li> <li>555551</li> <li>555551</li> </ul> </td></tr></table ><!--[If LTE IE 6]><! [endif]--> </li> <li> Navigation 6 <!--[if IE 7]><!--><!--<! [endif]--><table><tr><td> <ul> <li>666661</li> <li>666661</li> <li>666661</li> </ul> </td></tr></table><!--[if LTE IE 6]><! [endif]--> </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
