zoukankan
html css js c++ java
Jq三级菜单(一二级为水平,三级为垂直)
<!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"> <head> <title>豪情</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;} li{list-style:none;} a{text-decoration:none;} a:link{color:#000;text-decoration:none;} a:hover{text-decoration:none;} #nav{500px;margin:0 auto;padding-top:20px;} #nav li{text-align:center;float:left;position:relative;} #nav li a{float:left;65px;height:30px;line-height:30px;border:1px solid #ccc;margin-right:15px;} #nav li a:hover{background:#eee;} #nav li ul{position:absolute;top:30px;left:0px;600px;display:none;} #nav li ul li a{65px;height:30px;line-height:30px;border:1px solid #ccc;} #nav li ul li ul{position:absolute;top:30px;left:0px;display:none;} #nav li ul li ul li{float:none;} #nav li ul li ul li a{float:none;display:block;} .a{border:#ff80c0 solid 2px;300px;height:200px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#nav li').hover(function(){ $(this).children('ul').show().end(); }, function(){ $(this).children('ul').hide().end(); }) }); </script> </head> <body> <ul id="nav"> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单三1</a></li> <li><a href="#">菜单三2</a></li> <li><a href="#">菜单三3</a></li> <li><a href="#">菜单三4</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
运行代码
查看全文
相关阅读:
程序员求职之道(《程序员面试笔试宝典》)之海量数据处理(如何从10亿查询词找出出现频率最高的10个)?
程序员求职之道(《程序员面试笔试宝典》)之程序设计基础(内存分配形式)?
程序员求职之道(《程序员面试笔试宝典》)之智力题攻略?(称重类智力题)
程序员求职之道(《程序员面试笔试宝典》)之海量数据处理(排序问题)?
程序员求职之道(《程序员面试笔试宝典》)之优秀程序员应该具备哪些素质?
如何能把知识变现
民企赚一元,五毛都交了税
企业的核心竞争力是什么
未来将有50%人失业
培养管理人才重在教育
原文地址:https://www.cnblogs.com/jikey/p/1769317.html
最新文章
队列queue(1) 结构体实现队列
快速排序的介绍以及其两大坑点
子区间为1的简化版桶排序——计数排序
时间复杂度入门理解
Flappy Bird C语言实现及C图形库Easyx的使用
PyQt专题结题感言
第15.48节、PyQt显示部件:TextBrowser、CalendarWidget、LCDNumber、ProgressBar、Label、HorizontalLine和VerticalLine简
第四十一章、PyQt显示部件:TextBrowser、CalendarWidget、LCDNumber、ProgressBar、Label、HorizontalLine和VerticalLine简介
PyQt(Python+Qt)学习随笔:窗口layout布局的SizeConstraint和部件的大小约束策略sizePolicy不起作用的问题
PyQt(Python+Qt)学习随笔:使用实例方法赋值方式捕获事件
热门文章
第15.47节、PyQt显示部件:QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例
第四十章、PyQt显示部件:QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例
第15.46节、PyQt显示部件:OpenGL Widget部件功能简介及使用案例
第三十九章、PyQt显示部件:OpenGL Widget部件功能简介及使用其显示图片
第15.45节、PyQt输入部件:QKeySequenceEdit快捷键输入部件简介和使用案例
程序员求职之道(《程序员面试笔试宝典》)之程序设计基础(static的使用)?
程序员求职之道(《程序员面试笔试宝典》)之数据结构与算法(数组和链表的区别)?
程序员求职之道(《程序员面试笔试宝典》)之操作系统(线程和进程的区别)?
程序员求职之道(《程序员面试笔试宝典》)之操作系统(内核线程和用户线程的区别)
程序员求职之道(《程序员面试笔试宝典》)之数据结构与算法(排序算法)?
Copyright © 2011-2022 走看看