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 the transition doctype--> <ptml xmlns= "http://www.w3.org/1999/xhtml" lang= "gb2312" ><!--define namespaces-- <pead><!--Page Header start-up <title> page layout + pure CSS vertical drop down menu </title><!--title Bar--<meta http-equiv= " Content-type "content=" text/html; charset=gb2312 "/><!--Definition Language code--<meta http-equiv=" Content-language "content=" gb2312 "/><!-- Define language for older browsers--<meta content= "All" name= "robots"/><!--allow search for robots--<meta name= "Author" content= " 7273771@gmail.com, Yang Paradox, qq:7273771 "/><!--author Info--<meta name=" Copyright "content=" blog.529600.com, jointly explored, Allow reprint of "/><!--copyright information--<meta name=" description "content=" drop-down menu, CSS, Layout "/><!--profile--<meta content= "Dropdown, menu, CSS, layout" name= "keywords"/><!--keywords-<!--CSS style start-and-<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 ends-</pead><!--end of page--<body><!--Start Page body--logo Banner Mail <ul> <li> First category <!--[if IE 7]><!--><! --<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L T;/li> <li>PHP</li> <li>MySQL</li> <LI>FIREWORKS&L T;/li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> <li> First category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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&G T </tr> </table> <! [endif]--> </li> <li> First category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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 category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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 category <!--[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> &L t;! [endif]--> </li> <li> First category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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& Gt <! [endif]--> </li> <li> First category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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 category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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 category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> < td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L t;/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 category <!--[if IE 7]><!--><!--<! [endif]--><!--[If LTE IE 6]> <table> <tr> <td><! [endif]--> <ul> <li>XHTML</li> <LI>CSS&L T;/li> <li>PHP</li> <LI>MYSQL</LI> <li>Fireworks</li> <li>Photoshop</li> <LI>FLASH</LI&G T <li>Illustrator</li> </ul><!--[if LTE IE 6]> </td> </tr> </table> <! [endif]--> </li> </ul> You are here: Home left Middle Right footer </body><!--page body ends--</ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
