zoukankan
html css js c++ java
js实现弹出式菜单
body
{
}
{
margin
:
0
;
}
#wrap
{
}
{
font-size
:
15px
;
}
#nav
{
}
{
margin
:
0 0 0 0
;
padding
:
3px 0
;
line-height
:
normal
;
font-size
:
15px
;
width
:
100%px
;
}
#nav ul
{
}
{
padding
:
0
;
margin
:
0
;
list-style
:
none
;
}
#nav li
{
}
{
display
:
inline
;
margin
:
0
;
padding
:
0
;
background-color
:
White
;
}
#nav a
{
}
{
float
:
left
;
margin
:
0
;
padding
:
0 0 0 2px
;
background-color
:
white
;
text-decoration
:
none
;
}
#nav a span
{
}
{
display
:
block
;
margin
:
0
;
color
:
#000000
;
padding
:
5px 13px 3px 13px
;
background-color
:
Gray
;
}
#nav a:hover
{
}
{
background-color
:
#FFFFFF
;
}
#nav a:hover span
{
}
{
background-color
:
#00CCFF
;
color
:
#FFFFFF
;
}
#nav #selected
{
}
{
background-color
:
#00CCFF
;
color
:
#FFFFFF
;
}
#subnav
{
}
{
margin
:
0
;
padding
:
0
;
width
:
100%
;
height
:
25px
;
}
#sub_nav_3
{
}
{
background-color
:
#00CCFF
;
color
:
#FFFFFF
;
padding
:
4px 5px 4px 30px
;
}
#sub_nav_3 a
{
}
{
color
:
#FFFFFF
;
font-size
:
13px
;
}
function
fetch_object(idname)
{
var
my_obj
=
document.getElementById(idname);
return
my_obj;
}
function
wskm_nav(obj)
{
for
(i
=
1
; i
<=
10
; i
++
)
{
var
sub_nav
=
fetch_object(
"
sub_nav_
"
+
i);
if
(obj
==
i)
{
sub_nav.style.display
=
"
block
"
;
}
else
{
sub_nav.style.display
=
"
none
"
;
}
}
}
<!--
主导行栏开始
-->
<
div
id
="nav"
>
<
ul
>
<
li
><
a
href
="#"
><
span
id
="selected"
onmouseover
="javasrcipt:wskm_nav(1)"
>
首页
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(2)"
>
云南旅游
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(3)"
>
云南酒店
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(4)"
>
云南美食
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(5)"
>
云南风光
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(6)"
>
云南风情
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(7)"
>
云南特产
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(8)"
>
票务中心
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(9)"
>
会议会展
</
span
></
a
></
li
>
<
li
><
a
href
="#"
><
span
onmouseover
="javasrcipt:wskm_nav(10)"
>
客户留言
</
span
></
a
></
li
>
</
ul
>
</
div
>
<!--
主导行栏结束
-->
<!--
次导行栏开始
-->
<
div
id
="subnav"
>
<
div
id
="sub_nav_1"
style
="display:none;"
></
div
>
<
div
id
="sub_nav_2"
style
="display:none;"
></
div
>
<
div
id
="sub_nav_3"
style
="display:none;"
>
<
a
href
="#"
>
昆明
</
a
>
|
<
a
href
="#"
>
丽江
</
a
>
|
<
a
href
="#"
>
版纳
</
a
>
|
<
a
href
="#"
>
迪庆
</
a
>
|
<
a
href
="#"
>
德宏
</
a
>
|
<
a
href
="#"
>
曲靖
</
a
>
|
<
a
href
="#"
>
思茅
</
a
>
|
<
a
href
="#"
>
玉溪
</
a
>
|
<
a
href
="#"
>
临沧
</
a
>
|
<
a
href
="#"
>
保山
</
a
>
|
<
a
href
="#"
>
红河
</
a
>
|
<
a
href
="#"
>
大理
</
a
>
</
div
>
<
div
id
="sub_nav_4"
style
="display:none;"
>
<
a
href
="#"
>
昆
</
a
>
|
<
a
href
="#"
>
丽江
</
a
>
|
<
a
href
="#"
>
版纳
</
a
>
|
<
a
href
="#"
>
迪庆
</
a
>
|
<
a
href
="#"
>
德宏
</
a
>
|
<
a
href
="#"
>
曲靖
</
a
>
|
<
a
href
="#"
>
思茅
</
a
>
|
<
a
href
="#"
>
玉溪
</
a
>
|
<
a
href
="#"
>
临沧
</
a
>
|
<
a
href
="#"
>
保山
</
a
>
|
<
a
href
="#"
>
红河
</
a
>
|
<
a
href
="#"
>
大理
</
a
>
</
div
>
<
div
id
="sub_nav_5"
style
="display:none;"
>
<
a
href
="#"
>
昆明
</
a
>
|
<
a
href
="#"
>
丽
</
a
>
|
<
a
href
="#"
>
版纳
</
a
>
|
<
a
href
="#"
>
迪庆
</
a
>
|
<
a
href
="#"
>
德宏
</
a
>
|
<
a
href
="#"
>
曲靖
</
a
>
|
<
a
href
="#"
>
思茅
</
a
>
|
<
a
href
="#"
>
玉溪
</
a
>
|
<
a
href
="#"
>
临沧
</
a
>
|
<
a
href
="#"
>
保山
</
a
>
|
<
a
href
="#"
>
红河
</
a
>
|
<
a
href
="#"
>
大理
</
a
>
</
div
>
<
div
id
="sub_nav_6"
style
="display:none;"
>
<
a
href
="#"
>
昆明
</
a
>
|
<
a
href
="#"
>
丽江
</
a
>
|
<
a
href
="#"
>
纳
</
a
>
|
<
a
href
="#"
>
迪庆
</
a
>
|
<
a
href
="#"
>
德宏
</
a
>
|
<
a
href
="#"
>
曲靖
</
a
>
|
<
a
href
="#"
>
思茅
</
a
>
|
<
a
href
="#"
>
玉溪
</
a
>
|
<
a
href
="#"
>
临沧
</
a
>
|
<
a
href
="#"
>
保山
</
a
>
|
<
a
href
="#"
>
红河
</
a
>
|
<
a
href
="#"
>
大理
</
a
>
</
div
>
<
div
id
="sub_nav_7"
style
="display:none;"
>
<
a
href
="#"
>
昆明
</
a
>
|
<
a
href
="#"
>
丽江
</
a
>
|
<
a
href
="#"
>
版纳
</
a
>
|
<
a
href
="#"
>
庆
</
a
>
|
<
a
href
="#"
>
德宏
</
a
>
|
<
a
href
="#"
>
曲靖
</
a
>
|
<
a
href
="#"
>
思茅
</
a
>
|
<
a
href
="#"
>
玉溪
</
a
>
|
<
a
href
="#"
>
临沧
</
a
>
|
<
a
href
="#"
>
保山
</
a
>
|
<
a
href
="#"
>
红河
</
a
>
|
<
a
href
="#"
>
大理
</
a
>
</
div
>
<
div
id
="sub_nav_8"
style
="display:none;"
></
div
>
<
div
id
="sub_nav_9"
style
="display:none;"
></
div
>
<
div
id
="sub_nav_10"
style
="display:none;"
></
div
>
</
div
>
<!--
次导行栏结束
-->
查看全文
相关阅读:
记录一次win10最大的bug
Spring事务处理知识点
ubuntu系统上安装docker
Java抽象方法、接口、访问修饰符、访问权限笔记
java牛客刷题2020年10月2日
牛客错题2020年9月30日
牛客错题2020年9月29日
牛客刷题2020年9月27日
java牛客刷题2020年9月21日
java牛客刷题2020年9月20日
原文地址:https://www.cnblogs.com/ddr888/p/593515.html
最新文章
javaweb学习(九)—— 通过Servlet生成验证码图片
JavaWeb学习(八)---HttpServletResponse对象(二)
OpenGL(四)之颜色篇
JavaWeb学习(七)---HttpServletResponse对象(一)
操作系统原理之选择题
OpenGL(三)之基础绘制篇
JavaWeb学习(六)---Servlet开发(二)
JavaWeb学习(5.5)---在Servlet使用getServletContext()获取ServletContext对象出现java.lang.NullPointerException(空指针)异常的解决办法
JavaWeb学习(3.5)---Eclipse与Tomcat
easy UI mybatis springMvc 通过前台输入的时间查询数据库 Oracle
热门文章
springMvc easyui 文件上传功能 java
通过原生的java Http请求soap发布接口
quartz 执行定时任务配置及案例
xml字符串和java实体类相互转换JaxbXmlUtil工具类 附java实体类生成soap接口报文案例
java解析xml获取对应值
xml转换成java对象
HttpRequest Java原生代码封装
Java基础 关键字 和标识符
ImgUtil.java根据长宽压缩图片 根据坐标长宽切图 生成缩率图
jupyter notebook密码设置
Copyright © 2011-2022 走看看