JS左侧菜单-03

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

 </script>

 <script type="text/javascript">

 _uacct = "UA-152060-1";

 urchinTracker();

 </script>

 <title>demo</title>

 <style type="text/css">

 <!--

 body {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 11px;

 }

 #nav, #nav ul {

  list-style: none;

  background: #F9F9F9;

  font-weight: bold;

  padding: 0px;

  margin: 0px;

  border: solid 1px #CCCCCC;

  border-bottom: 0px;

  width: 150px;

  text-align: left;

 }

 #nav ul ul{

  border: solid 1px #CCCCCC;

  border-bottom: 0px;

 }

 #nav a {

  display: block;

  width: 150px;

  w\idth: 140px;

  color: #333333;

  text-decoration: none;

  text-align: center;

  border-bottom: solid 1px #CCCCCC;

  text-align: left;

  padding-left: 10px;

 }

 #nav a:hover{

  color: #336666;

 }

 #nav a.selected{

  background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%;

 }

 #nav li {

  line-height: 22px;

  position: relative;

 }

 #nav li ul {

  position: absolute;

  left: -999em;

  width: 150px;

  font-weight: normal;

  margin: 0px;

  padding: 0px;

 }

 #nav li li {

  width: 150px;

 }

 #nav li ul a {

  width: 150px;

  w\idth: 126px;

  padding: 0px 12px;

  line-height: 22px;

  text-align: left;

 }

 #nav li ul ul {

  margin: 0px 0 0 150px;

 }

 #nav li:hover ul ul,#nav li.sfhover ul ul{

  left: -999em;

 }

 #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{

  left: auto;

 }

 #nav li:hover ul,#nav li.sfhover ul{

  left: 150px;

  top: 0px;

 }

 #nav li:hover, #nav li.sfhover {

  background: #F5E3C0;

 }

 * html #nav li {

  float: left;

  height: 1%;

 }

 * html #nav li a {

  height: 1%;

 }

 -->

 </style>

 <script type="text/javascript"><!--//--><![CDATA[//><!--

 sfHover = function() {

  var sfEls = document.getElementById("nav").getElementsByTagName("LI");

  for (var i=0; i<sfEls.length; i++) {

   sfEls[i].onmouseover=function() {

    this.className+=" sfhover";

   }

   sfEls[i].onmouseout=function() {

    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

   }

  }

 }

 if (window.attachEvent) window.attachEvent("onload", sfHover);

 //--><!]]></script>

 </head>

 <body>

 <p><a href="javascript:history.back()">Back</a></p>

 <ul id="nav">

 <li><a href="">Home</a></li>

 <li><a href="/aboutme.html">About Me</a></li>

 <li><a class="selected" href="/tutorials.html">Tutorials</a>

  <ul>

  <li><a href="#">Sub Menu 31</a></li>

  <li><a class="selected" href="#">Sub Menu 32</a>

  <ul>

  <li><a href="#">Sub Menu 321</a></li>

  <li><a href="#">Sub Menu 322</a></li>

  <li><a href="#">Sub Menu 323</a></li>

  <li><a href="#">Sub Menu 324</a></li>

  </ul>

  </li>

  <li><a href="#">Sub Menu 33</a></li>

  <li><a href="#">Sub Menu 34</a></li>

  </ul>

 </li>

 <li><a class="selected" href="/gallery/gallery.html">Gallery</a>

 <ul>

  <li><a href="#">Sub Menu 41</a></li>

  <li><a class="selected" href="#">Sub Menu 42</a>

  <ul>

  <li><a href="#">Sub Menu 421</a></li>

  <li><a href="#">Sub Menu 422</a></li>

  <li><a href="#">Sub Menu 423</a></li>

  <li><a href="#">Sub Menu 424</a></li>

  </ul>

  </li>

  <li><a href="#">Sub Menu 43</a></li>

  <li><a href="#">Sub Menu 44</a></li>

  </ul>

 </li>

 <li><a href="#">Contact Me</a></li>

 </ul>

 <script src="/copyrightdemo.js" type="text/javascript"></script>

 </body>

 </html>

JS左侧菜单-03的更多相关文章

JS左侧菜单-02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns=" ...
JS左侧菜单-04
<script language="javascript" type="text/javascript"> function HideShow() ...
JS练习题（左侧菜单下拉+好友选中）
题一.左侧菜单下拉做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
LayUI左侧菜单无法保持选中状态
1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...
jquery左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jquery实现全选，取消，反选的功能&实现左侧菜单
1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

winhec
#winhec# 开发人员刷屏看点 (视频) 今天大家已经被winhec刷屏了,本来不想写这篇了,但看了所有的文章,大家关注的都是windows 10的那些新功能,小米win10刷机,联想千元手机,小 ...
在 MVC6 中创建 Web API
ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API ASP.NET 5.0 的主要目标之一是统一MVC 和 Web API 框架应用. 接下来几篇文章中您会了解以下内容: ...
浅谈javascript性能-管理内存
上次说到,javascript脚本到底应该放在哪里?用什么用处? 以下2点: 在Html.Body部分中的JS会在页面加载的时候执行.即-用户触发一个事件的时候执行的脚本.eg:onload事件... ...
Delphi三层网络架构代码实现
Delphi三层网络架构代码实现 1 .三层网络的概念三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为: 表现层(UI).业务逻辑层(BLL).数据访 ...
springMVC 获取本地项目路径及后整理上传文件的方法
String path=request.getSession().getServletContext().getRealPath("upload/img/product"); // ...
ActiveReports 9实战教程（1）：手把手搭建环境Visual Studio 2013 社区版
原文:ActiveReports 9实战教程(1): 手把手搭建环境Visual Studio 2013 社区版 ActiveReports 9刚刚发布3天,微软就发布了 Visual Studio ...
Ora创建job定时执行某存储过程
--创建job任务,每天晚上8点执行存储过程:por_postrecords-- declare job number; begin sys.dbms_job.submit(job =>job, ...
在weblogic11g发布该项目时遇到错误（不支持web-app_3_0）
problem: cvc-enumeration-valid: string value '3.0' is not a valid enumeration value for web-app-vers ...
JavaScript中的execCommand()命令详解及实例展示
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...
Linux Shell脚本攻略
-Linux Shell脚本攻略总结的来说,这本书很实践性和实用性强,都是给的具体的例子,直接可以在终端操作实践,比单纯只看不动手务实多了,另外就是,这本书涵盖的内容也比较广,从文本操作到服务器管理 ...

JS左侧菜单-03

JS左侧菜单-03的更多相关文章

随机推荐

热门专题