1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 7 </script> 8 <script type="text/javascript"> 9 _uacct = "UA-152060-1"; 10 urchinTracker(); 11 </script> 12 <title>demo</title> 13 <style type="text/css"> 14 <!-- 15 body { 16 font-family: Arial, Helvetica, sans-serif; 17 font-size: 11px; 18 } 19 #nav, #nav ul { 20 list-style: none; 21 background: #F9F9F9; 22 font-weight: bold; 23 padding: 0px; 24 margin: 0px; 25 border: solid 1px #CCCCCC; 26 border-bottom: 0px; 27 150px; 28 text-align: left; 29 } 30 #nav ul ul{ 31 border: solid 1px #CCCCCC; 32 border-bottom: 0px; 33 } 34 #nav a { 35 display: block; 36 150px; 37 140px; 38 color: #333333; 39 text-decoration: none; 40 text-align: center; 41 border-bottom: solid 1px #CCCCCC; 42 text-align: left; 43 padding-left: 10px; 44 } 45 #nav a:hover{ 46 color: #336666; 47 } 48 #nav a.selected{ 49 background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%; 50 } 51 #nav li { 52 line-height: 22px; 53 position: relative; 54 } 55 #nav li ul { 56 position: absolute; 57 left: -999em; 58 150px; 59 font-weight: normal; 60 margin: 0px; 61 padding: 0px; 62 } 63 #nav li li { 64 150px; 65 } 66 #nav li ul a { 67 150px; 68 126px; 69 padding: 0px 12px; 70 line-height: 22px; 71 text-align: left; 72 } 73 #nav li ul ul { 74 margin: 0px 0 0 150px; 75 } 76 #nav li:hover ul ul,#nav li.sfhover ul ul{ 77 left: -999em; 78 } 79 #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ 80 left: auto; 81 } 82 #nav li:hover ul,#nav li.sfhover ul{ 83 left: 150px; 84 top: 0px; 85 } 86 #nav li:hover, #nav li.sfhover { 87 background: #F5E3C0; 88 } 89 * html #nav li { 90 float: left; 91 height: 1%; 92 } 93 * html #nav li a { 94 height: 1%; 95 } 96 --> 97 </style> 98 <script type="text/javascript"><!--//--><![CDATA[//><!-- 99 sfHover = function() { 100 var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 101 for (var i=0; i<sfEls.length; i++) { 102 sfEls[i].onmouseover=function() { 103 this.className+=" sfhover"; 104 } 105 sfEls[i].onmouseout=function() { 106 this.className=this.className.replace(new RegExp(" sfhover\b"), ""); 107 } 108 } 109 } 110 if (window.attachEvent) window.attachEvent("onload", sfHover); 111 //--><!]]></script> 112 </head> 113 <body> 114 <p><a href="javascript:history.back()">Back</a></p> 115 <ul id="nav"> 116 <li><a href="">Home</a></li> 117 <li><a href="/aboutme.html">About Me</a></li> 118 <li><a class="selected" href="/tutorials.html">Tutorials</a> 119 <ul> 120 <li><a href="#">Sub Menu 31</a></li> 121 <li><a class="selected" href="#">Sub Menu 32</a> 122 <ul> 123 <li><a href="#">Sub Menu 321</a></li> 124 <li><a href="#">Sub Menu 322</a></li> 125 <li><a href="#">Sub Menu 323</a></li> 126 <li><a href="#">Sub Menu 324</a></li> 127 </ul> 128 </li> 129 <li><a href="#">Sub Menu 33</a></li> 130 <li><a href="#">Sub Menu 34</a></li> 131 </ul> 132 </li> 133 <li><a class="selected" href="/gallery/gallery.html">Gallery</a> 134 <ul> 135 <li><a href="#">Sub Menu 41</a></li> 136 <li><a class="selected" href="#">Sub Menu 42</a> 137 <ul> 138 <li><a href="#">Sub Menu 421</a></li> 139 <li><a href="#">Sub Menu 422</a></li> 140 <li><a href="#">Sub Menu 423</a></li> 141 <li><a href="#">Sub Menu 424</a></li> 142 </ul> 143 </li> 144 <li><a href="#">Sub Menu 43</a></li> 145 <li><a href="#">Sub Menu 44</a></li> 146 </ul> 147 </li> 148 <li><a href="#">Contact Me</a></li> 149 </ul> 150 <script src="/copyrightdemo.js" type="text/javascript"></script> 151 </body> 152 </html>