JS左侧菜单-03

  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>