Full CSS Pull-down menu, only CSS, pure CSS architecture!

The core hint: the pure CSS constructs the Drop-down navigation menu!

Look at the CSS code, pay attention to carefully, study well!

<style type= "Text/css" ><br/>.menu {<br/>font-family:verdana, sans-serif; <br/>width:750px; <br/>position:relative; <br/>font-size:0.85em;<br/>padding-bottom:250px;<br/>}<br/>.menu ul {<br/>padding : 0; <br/>margin:0;<br/>list-style-type:none;<br/>}<br/>.menu ul Li {<br/>float:left; <br/>position:relative;<br/>}<br/>.menu ul li A,. Menu ul Li a:visited {<br/>display:block; <br/>text-decoration:none; <br/>color: #000; <br/>width:139px; <br/>height:3em; <br/>color: #000; <br/>border:1px solid #fff; <br/>border-width:1px 1px 0 0; <br/>background: #dfc184; <br/>padding-left:10px; <br/>line-height:3em;<br/>}<br/>* HTML. Menu ul li A,. Menu ul li a:visited {<br/>width:149px;& Lt;br/>w\idth:139px;<br/>}<br/>.menu UL Li ul <br/>display:none;<br/>}<br/>table {<br/>margin:-1px; <br/>border-collapse:collapse;<br/>font-size:1em;<br/>}<br/><br/>/* specific to Non IE Browsers */<br/>.menu ul li:hover a {<br/>color: #fff; <br/>background: #bd8d5e; <br/>}<br />.menu UL Li:hover ul {<br/>display:block; <br/>position:absolute; <br/>top:3em;<br/> margin-top:1px;<br/>left:0; <br/>width:150px;<br/>}<br/>.menu UL Li:hover ul Li ul <br/>display:none;<br/>}<br />.menu UL Li:hover ul li a {<br/>display:block; <br/>background: #faeec7; <br/>color: #000; <br/ >height:auto; <br/>line-height:1.2em; <br/>padding:5px 10px; <br/>width:129px<br/>}<br/>.menu UL Li:hover ul Li A.drop {<br/>background: #c9c9a7; <br/ >}<br/>.menu UL Li:hover ul li a:hover {<br/>background: #c9c9a7; <br/>color: #000; <br/>} <br/>.menu UL Li:hover ul li:hover ul {<br/>display:block; <br/>position:absolute; <br/>left:150px; <br/>top:0;<br/>width:150px;<br/>}<br/>.menu UL Li:hover ul li:hover Ul.left {<br/> left:-150px;<br/>}<br/></style><br/><!--[If LTE IE 6]><br/><style type=] Text/css "><br/>.menu ul li a:hover {<br/>color: #fff; <br/>background: #bd8d5e;<br/>}< Br/>.menu ul Li A:hover ul {<br/>display:block; <br/>position:absolute; <br/>top:3em; <br/> Left:0;<br/>background: #fff; <br/>margin-top:0;<br/>marg\in-top:1px;<br/>}<br/> Menu ul Li A:hover ul li a {<br/>display:block; <br/>background: #dbe4ab; <br/>color: #000; <br/> Height:auto; <br/>line-height:1.5em; <br/>padding:5px 10px; <br/>width:150px;<br/>w\idth:129px;<br/>}<br/>.menu ul Li A:hover ul Li A.drop {<br/> Background: #c9c9a7 <br/>}<br/>.menu ul Li A:hover ul Li a ul <br/>visibility:hidden; <br/>position:absolute; <br/>height:0; <br/>width:0;<br/>}<br/>.menu ul Li A:hover ul li a:hover {<br/>background: #c9c9a7; color: #000 <br/>}<br/>.menu ul Li A:hover ul Li A:hover ul {<br/>visibility:visible; <br/>position: absolute; <br/>top:0; <br/>color: #000 <br/>left:150px;<br/>}<br/>.menu ul Li A:hover ul li A:hover ul.left {<br/ >left:-150px;<br/>}<br/><br/></style><br/><! [endif]-->

Let's take a look at the XHTML code, too.
<div class= "menu" ><br/><ul><br/><li><a class= "Drop" href= "http://www.duote.com/" >DEMOS<br/><!--[If IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"Title=" "The Zero Dollar ads page" >zero dollars advertising page</a></li><br/ ><li><a href= "http://www.duote.com/" title= "wrapping text around images" >wrapping text around images </a></li><br/><li><a href= "http://www.duote.com/" title= "Styling Forms" >styled form </a></li><br/><li><a href= "http://www.duote.com/" title= "removing Active/focus" >active focus</a></li><br/><li><a class= "Drop" href= "http://www.duote.com/" Hover/click with no active/focus borders ' >hover/click with no borders<br/><!--[if IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"title=" Styling Forms ">styled form</a></li><br/><li><a href=" http://www.duote.com/"title=" removing Active/focus borders ">removing active/focus borders</a></li> <br/><li><a href= "http://www.duote.com/" title= "Hover/click with no active/focus borders" >hover/ click</a></li><br/></ul><br/></td></tr></table><br/>< !--[If LTE IE 6]><br/></a><br/><! [Endif]--><br/></li><br/><li class= "Upone" ><a href= "http://www.duote.com/" Multi-position drop Shadow ">shadow boxing</a></li><br/><li><a href=" http:// www.duote.com/"title=" Image map for detailed information ">image map for detailed Information</a></li> <br/><li><a href= "http://www.duote.com/" title= "fun with background images" >fun with background Images</a></li><br/><li><a href= "http://www.duote.com/" title= "fade-out scrolling" > Fade Scrolling</a></li><br/><li><a href= "http://www.duote.com/" title= "em size images Compared ">em image sizes Compared</a></li><br/></ul><br/></td></tr> </table><br/><!--[If LTE IE 6]><br/></a><br/><! [Endif]--><br/></li><br/><li><a href= "http://www.duote.com/" >BOXES<br/> <!--[if IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"title=" a coded list of spies ">a coded list of spies</a></li><br/><li> <a href= "http://www.duote.com/" title= "a hoRizontal Vertical Menu ">vertical menu</a></li><br/><li><a href=" http://www.duote.com /"title=" An enlarging unordered list ">enlarging unordered list</a></li><br/><li><a href= "http://www.duote.com/" title= "a unordered list with link images" >link images</a></li><br/ ><li><a href= "http://www.duote.com/" title= "Non-rectangular links" >non-rectangular</a></ Li><br/><li><a href= "http://www.duote.com/" title= "Jigsaw Links" >jigsaw Li><br/><li><a href= "http://www.duote.com/" title= "Circular links" >circular </li><br/></ul><br/></td></tr></table><br/><!--[If LTE IE 6] ><br/></a><br/><! [Endif]--><br/></li><br/><li><a href= "http://www.duote.com/" >mozilla<br/ ><!--[If IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"title=" A drop down menu ">drop down menu</a></li><br/><li><a href = "http://www.duote.com/" title= "A cascading menu" >cascading menu</a></li><br/><li><a href= "http://www.duote.com/" title= "Using content:" >content:</a></li><br/><li><a href= "http://www.duote.com/" title= ": hover applied to a div" >mozzie box</a></li><br/><li> <a href= "http://www.duote.com/" title= "I can build a Rainbow" >i can builds a rainbow with transparent BORDERS&LT;/A&G T;</li><br/><li><a href= "http://www.duote.com/" title= "snooker cue" >a snooker cue using Border Art</a></li><br/><li><a href= "http://www.duote.com/" title= "Target practise" > Target Practise</a></li><br/><li><a Href= "http://www.duote.com/" title= "Two tone headings" >two tone Headings</a></li><br/><li ><a href= "http://www.duote.com/" title= "Shadow text" >shadow text</a></li><br/></ul ><br/></td></tr></table><br/><!--[If LTE IE 6]&GT;&LT;BR/&GT;&LT;/A&GT;&LT;BR /><! [Endif]--><br/></li><br/><li><a href= "http://www.duote.com/" >explorer<br/ ><!--[If IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"title=" Example One ">the the one Example for Internet explorer</a></li><br/> <li><a href= "http://www.duote.com/" title= "weft fonts" >weft fonts</a></li><br/>< Li><a href= "http://www.duote.com/" title= "Vertical align" >vertically aligning text</a></li> <br/></ul><br/></td></tr></table><br/><!--[If LTE IE 6]><br/></a> <br/><! [Endif]--><br/></li><br/><li><a href= "http://www.duote.com/" >opacity<br/ ><!--[If IE 7]><!--><br/></a><br/><!--<! [Endif]--><br/><table><tr><td><br/><ul><br/><li><a href=] http://www.duote.com/"title=" colour Wheel ">a colour wheel using opaque colours</a></li><br/> <li><a href= "http://www.duote.com/" title= "a menu using opacity" >a menu using opacity</a></li> <br/><li><a href= "http://www.duote.com/" title= "partial opacity" >partial opacity</a></ Li><br/><li><a href= "http://www.duote.com/" title= "partial opacity II" >partial opacity ></li><br/><li><a class= "Drop" href= "http://www.duote.com/" title= "Hover/click with no ACtive/focus borders ">HOVER/CLICK<br/><!--[if IE 7]><!--><br/></a><br/>< !--<! [Endif]--><br/><table><tr><td><br/><ul class= "left" ><br/><li ><a href= "http://www.duote.com/" title= "Styling Forms" >styled Form</a></li><br/><li ><a href= "http://www.duote.com/" title= "removing Active/focus borders" >removing active/focus ></li><br/><li><a href= "http://www.duote.com/" title= "Hover/click with no Active/focus Borders ">hover/click</a></li><br/></ul><br/></td></tr></table ><br/><!--[If LTE IE 6]><br/></a><br/><! [endif]--><br/><br/></li><br/></ul><br/></td></tr></ table><br/><!--[If LTE IE 6]><br/></a><br/><! [Endif]--><br/></li><br/></ul><br/></div>