The following code can be used for direct copy.
// Skin/style3.css
/////////////////////////////
@ Charset "UTF-8 ";
HTML, body, H1, H2, H3, H4, H5, H6, P, UL, ol, DL, form, Th, TD {margin: 0; padding: 0; font-size: 12px ;}
Body {margin: 10px; Font: 12px/2 verdana, Arial, Helvetica, simsun, "Microsoft yahei ";}
Table {border-collapse: collapse; border-Spacing: 0 ;}
Li {list-style: none ;}
A {text-Decoration: none; cursor: pointer ;}
. Copyright {margin-top: 50px; font-size: 13px; text-align: center ;}
# Dymenu {width: 100px; line-Height: 25px ;}
# Dymenu. Root Li {position: relative; Border: 1px solid # FFF; border-width: 1px 1px 0 0; Background: # Eee ;}
# Dymenu. Root Li {border-width: 1px 0 0 1px ;}
# Dymenu. Root A {display: block; ZOOM: 1; padding: 0 10px; Background: # Eee; color: #000; Vertical-align: Top ;}
# Dymenu. root H4 {padding: 0 10px; * padding: 0; Background: # Eee; * Background: none; color: #000; font-weight: normal; cursor: pointer ;}
# Dymenu. Root A: hover {Background: # DDD; color: #333 ;}
# Dymenu. Root Li: hover> H4 {Background: # DDD; color: #333 ;}
# Dymenu. root ul, # dymenu A: hover a ul, # dymenu: hover A: hover a ul, # dymenu A: hover a ul, # dymenu A: hover: hover A: hover a ul, # dymenu A: hover: hover a ul, # dymenu A: hover a ul, # dymenu A: hover: hover A: hover a ul {display: none; margin:-1px 0 0 0; _ margin-top: 0; Background: # Eee ;}
# Dymenu A: hover ul, # dymenu A: hover: hover A: hover ul, # dymenu A: hover ul, # dymenu A: hover: hover A: hover ul, # dymenu A: hover ul, # dymenu: hover A: hover ul, # dymenu A: hover: hover A: hover ul, # dymenu A: hover: hover A: hover ul {display: block; position: absolute; left: 99px; top: 0; width: 100px ;}
# Dymenu. root Li: hover> ul {display: block; position: absolute; left: 99px; top: 0; width: 100px; margin-top:-1px; Background: # Eee ;}
// Html drop-down menu Home Page
//////////////////////////////////////// /////////////////////////////////////
<! 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" XML: lang = "ZH-CN" lang = "ZH-CN">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta http-equiv = "content-language" content = "ZH-CN"/>
<Title> Create a vertical unlimited drop-down menu with pure CSS-powered by cloudification </title>
<Meta name = "Description" content = "this is an Infinite vertical drop-down menu created by pure CSS"/>
<Meta name = "keywords" content = "pure CSS, drop-down menu, unlimited menu"/>
<Meta name = "author" content = "doyoe (Misty rain), dooyoe@gmail.com"/>
<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "skin/style3.css"/>
</Head>
<Body>
<H1> unlimited CSS drop-down menu: <P> ie needs to preset the display level in the style file. other browsers can truly achieve an unlimited number of levels. </P>
<P> try the following unlimited menu now: </P>
<Div id = "dymenu">
<Ul class = "root">
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> drifting rain community & #187; </H4>
<Ul>
<Li> <a href = "http://www.doyoe.com/"> website reconstruction </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> semantic & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 3 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 3 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 4 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 4 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 5 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 5 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 6 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> level 6 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 7 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> level 7 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 8 menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 8 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 9 Menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> level 9 Menu & #187; </H4>
<Ul>
<Li> <a href = "? "> 10 levels menu </a> </LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> ten levels of menus & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 11 menu </a> </LI>
<Li> <a href = "? "> Level 11 menu </a> </LI>
<Li> <a href = "? "> Level 11 menu </a> </LI>
<Li> <a href = "? "> Level 11 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> 10 levels menu </a> </LI>
<Li> <a href = "? "> 10 levels menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 9 Menu </a> </LI>
<Li> <a href = "? "> Level 9 Menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 8 menu </a> </LI>
<Li> <a href = "? "> Level 8 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 7 menu </a> </LI>
<Li> <a href = "? "> Level 7 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 6 menu </a> </LI>
<Li> <a href = "? "> Level 6 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 5 menu </a> </LI>
<Li> <a href = "? "> Level 5 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 4 menu </a> </LI>
<Li> <a href = "? "> Level 4 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 3 menu </a> </LI>
<Li> <a href = "? "> Level 3 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "http://www.doyoe.com/"> Search Engine Optimization </a> </LI>
<Li> <a href = "http://www.doyoe.com/"> User Experience </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> CSS exploration tour & #187; </H4>
<Ul>
<Li> <a href = "http://blog.doyoe.com/"> CSS </a> </LI>
<Li> <a href = "http://blog.doyoe.com/"> XHTML </a> </LI>
<Li> <a href = "http://blog.doyoe.com/"> JavaScript </a> </LI>
<Li> <a href = "http://blog.doyoe.com/"> Seo </a> </LI>
<Li> <a href = "http://blog.doyoe.com/"> ue </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 1 menu & #187; </H4>
<Ul>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 2 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 3 menu </a> </LI>
<Li> <a href = "? "> Level 3 menu </a> </LI>
<Li> <a href = "? "> Level 3 menu </a> </LI>
<Li> <a href = "? "> Level 3 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li> <a href = "? "> Level 2 menu </a> </LI>
<Li> <a href = "? "> Level 2 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
<Li>
<! -- [If IE]> <a href = "? "> <Table> <tr> <TD> <! [Endif] -->
<H4> Level 1 menu & #187; </H4>
<Ul>
<Li> <a href = "? "> Level 2 menu </a> </LI>
<Li> <a href = "? "> Level 2 menu </a> </LI>
<Li> <a href = "? "> Level 2 menu </a> </LI>
<Li> <a href = "? "> Level 2 menu </a> </LI>
</Ul>
<! -- [If IE]> </TD> </tr> </table> </a> <! [Endif] -->
</LI>
</Ul>
</Div>
<P class = "Copyright"> & copy; copyright <a href = "http://blog.doyoe.com/" Title = "CSS exploration tour-Misty Estate"> doyoe.com </a> </P>
<SCRIPT type = "text/JavaScript">
VaR gajshost = ("https:" = Document. Location. Protocol )? "Https: // SSL.": "http: // www .");
Document. Write (Unescape ("% 3 cscript src = '" + gajshost + "google-analytics.com/ga.js'type = 'text/JavaScript' % 3E % 3C/script % 3e "));
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Try {
VaR pagetracker = _ gat. _ gettracker ("UA-3500471-2 ");
Pagetracker. _ trackpageview ();
} Catch (ERR) {}</SCRIPT>
</Body>
</Html>