Page layout + pure CSS vertical drop-down menu  IE6/IE7 compatible
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><!--define transition type doctype--> <ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" gb2312 "><!--define namespace--> <pead><!--Head Start--> <title> page layout + pure CSS Vertical drop-down menu </title><!--title bar--> <meta http-equiv= " Content-type "content=" text/html; charset=gb2312 "/><!--define language encoding--> <meta http-equiv=" content-language "content=" gb2312 "/><!-- For older browser definition language encoding--> <meta content= "All" name= "robots"/><!--allow search bots--> <meta name= "Author" content= "72 73771@gmail.com, Yang qq:7273771, "/><!--author information--> <meta name=" Copyright "content=" blog.529600.com, together to explore, Allow reprint "/><!--Copyright information--> <meta name=" description "content=" drop-down menu, CSS, Layout "/><!--profile--> <meta content= "Dropdown, menu, CSS, layout" name= "keywords"/><!--keywords--> <!--CSS styles start--> <style type=text/css> *{margin: 0; padding:0; border:0; html{background: #bfc4c7/* background color/} body{font:12px/150% ' song Body '; margin:0 Auto; width:770px; Text-align:center; #menu, #nav, #footer {clear:both; } #nav {padding-left:20px; Text-align:left; Background: #a60; } #footer {background: #a30; #logo, #banner, #mail, #left, #middle, #right {float:left; width:180px; Background: #f00; #logo, #banner, #mail {height:60px; } #banner {width:468px; Background: #f60; } #mail {width:122px; Background: #f90; } #left, #right {width:200px; } #left {background: #093; } #middle {width:370px; Background: #063; } #right {background: #033; /*menu Part */#menu {margin:0 auto; Width:770px!important; Clear:both} #menu ul{List-style:none; } #menu li {float:left; position:relative; } #menu ul ul {Visibility:hidden; Position:absolute; left:0px; top:30px; } #menu table{Position:absolute; left:0; top:0; #menu UL Li:hover ul, #menu ul a:hover ul{visibility:visible; } #menu a{Display:block; Text-align:center; Text-decoration:none; width:77px; height:30px; Color: #000; line-height:30px; Background: #c9c9a7; #menu a:hover{color: #fff; Background: #b3ab79; #menu ul ul Li {clear:both; Text-align:left; #menu ul ul Li a{display:block; width:77px; height:30px; Background: #faeec7; Color: #000; #menu ul ul Li a:hover{background: #dfc184; Color: #000; } </style><!--CSS style end--> </pead><!--page Header end--> <body><!--page body start--> <div I d= "logo" > Logo </div> <div id= "banner" > Banner </div> <div id= "Mail" &G T Mail </div> <div id= "menu" > <ul> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> < Li>mysql</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> ;/ul><!--[If LTE IE 6]> </td> </tr> </table> <![ endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>illustrator </li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td&gT </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>fi Reworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td& Gt </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>flash</li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First Classification <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <li>cs S</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash< /li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> </ul> </div> <div id= "NAV" > Your location: Home page </div& Gt <div id= "Left" > left </div> <div id= "MiddlE "> Middle </div> <div id=" right "> Right </div> <div id=" Footer "> Footer </div> </body><!--page main end--> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
