Here is a concise version, the main [show/hide] effect to peel out for everyone to study.
The main use of a:hover[ie],li:hover[non-ie] state to make the display/Hide menu effect.
Key points:
Program code
This note says: Only non-IE browsers and IE7 can read the
The HTML that is read in non-IE browser and IE7 versions of the browser is:
Program code
Navigation
Program code
This section of the note represents: only IE6 and IE6 the following versions of the browser can read to
The HTML that is read in IE6 and browsers in the following versions of IE6 is:
Program code
Navigation
Some friends may ask: why is it so complicated, instead of using links to include a two-level list, then just write a:hover on it, the code is much simpler.
I personally think:
Play the standard as much as possible to follow the semantics.
In IE6 and the following versions because the hover pseudo-class is not supported by a tag other than a, so for now, only this method can achieve a similar purpose, against the IE6 ... Had to give up the semantics.
But we do not for a IE6 and bad for the whole pot of soup oh, so some things although a bit of trouble, 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= "text/html; charset=gb2312 "/> <title> pure CSS menu </title> <style type=" Text/css "> <!--/* PR 50198763 */* {fon T-family: "The 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;}/* The default is to hide the next level of UL list */. Nav ul Li ul {display:none;}/* Displays the next level of UL list * * When the mouse passes through. Nav UL Li:hover ul,. Nav ul Li A:hover ul {Display:blo ck;width:100%;} /* long time no play ... The results do not know what went wrong, not bold is not. Who has in-depth research please detailed ~ Xie */. Nav li a:hover {font-weight:bold;}/* ====================== above is the key attribute ====================== *//* ====== ================ below you are free to play ====================== */* modifier style one */. 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> & lt;/head> <body> <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> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Notice that the inside is segmented, [play it randomly]. I first come to play ~ (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= "text/html; charset=gb2312 "/> <title> pure CSS menu </title> <style type=" Text/css "> <!--/* PR 50198763 */* {fon T-family: "The 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;}/* The default is to hide the next level of UL list */. Nav ul Li ul {display:none;}/* Displays the next level of UL list * * When the mouse passes through. Nav UL Li:hover ul,. Nav ul Li A:hover ul {Display:blo ck;width:100%;} /* long time no play ... The results do not know what went wrong, not bold is not. Who has in-depth research please detailed ~ Xie */. Nav li a:hover {font-weight:bold;}/* ====================== above is the key attribute ====================== *//* ====== ================ below you are free to play ====================== */* modifier style one */. 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> <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> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
