zoukankan
html css js c++ java
竖型下拉菜单
<!
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"
>
<
head
>
<
title
>
Horizontal Drop Down Menus
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=iso-8859-1"
/>
<
style
type
="text/css"
>
body
{
}
{
font
:
normal 12px verdana
;
}
ul
{
}
{
margin
:
0
;
padding
:
0
;
list-style
:
none
;
width
:
130px
;
/**/
/*
Width of Menu Items
*/
border-bottom
:
1px solid #ccc
;
}
ul li
{
}
{
position
:
relative
;
}
li ul
{
}
{
position
:
absolute
;
left
:
129px
;
/**/
/*
Set 1px less than menu width
*/
top
:
0
;
display
:
none
;
}
/**/
/*
Styles for Menu Items
*/
ul li a
{
}
{
display
:
block
;
text-decoration
:
none
;
color
:
#666
;
background
:
#fff
;
/**/
/*
IE6 Bug
*/
padding
:
5px
;
border
:
1px solid #ccc
;
border-bottom
:
0
;
}
/**/
/*
Fix IE. Hide from IE Mac \
*/
* html ul li
{
}
{
float
:
left
;
height
:
1%
;
}
* html ul li a
{
}
{
height
:
1%
;
}
/**/
/*
End
*/
ul li a:hover
{
}
{
color
:
#E2144A
;
background
:
#f9f9f9
;
}
/**/
/*
Hover Styles
*/
li ul li a
{
}
{
padding
:
2px 5px
;
}
/**/
/*
Sub Menu Styles
*/
li:hover ul, li.over ul
{
}
{
display
:
block
;
}
/**/
/*
The magic
*/
</
style
>
<
script
type
="text/javascript"
>
//
drop_down.js
startList
=
function
()
{
if
(document.all
&&
document.getElementById)
{
navRoot
=
document.getElementById(
"
nav
"
);
for
(i
=
0
; i
<
navRoot.childNodes.length; i
++
)
{
node
=
navRoot.childNodes[i];
if
(node.nodeName
==
"
LI
"
)
{
node.onmouseover
=
function
()
{
this
.className
+=
"
over
"
;
}
node.onmouseout
=
function
()
{
this
.className
=
this
.className.replace(
"
over
"
,
""
);
}
}
}
}
}
window.onload
=
startList;
</
script
>
</
head
>
<
body
>
<
ul
id
="nav"
>
<
li
><
a
href
="javascript:void(0);"
>
Home
</
a
></
li
>
<
li
><
a
href
="javascript:void(0);"
>
About
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
History
</
a
></
li
>
<
li
><
a
href
="#"
>
Team
</
a
></
li
>
<
li
><
a
href
="#"
>
Offices
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="javascript:void(0);"
>
Services
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
Web Design
</
a
></
li
>
<
li
><
a
href
="#"
>
Internet Marketing
</
a
></
li
>
<
li
><
a
href
="#"
>
Hosting
</
a
></
li
>
<
li
><
a
href
="#"
>
Domain Names
</
a
></
li
>
<
li
><
a
href
="#"
>
Broadband
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="javascript:void(0);"
>
Contact Us
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
United Kingdom
</
a
></
li
>
<
li
><
a
href
="#"
>
France
</
a
></
li
>
<
li
><
a
href
="#"
>
USA
</
a
></
li
>
<
li
><
a
href
="#"
>
Australia
</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
查看全文
相关阅读:
Java抽象类和接口和继承之间关系
Java程序中解决数据库超时与死锁
怎样成为一名出色的Java Web程序员?
Java中断线程的方法
Java 集合框架(Collection)和数组的排序
StringBuffer帮你减轻Java的负担
学好Java开发的关键七步
kvm的分层控制
一个高扩展高可用高负载的应用架构的诞生记(原创)
防火墙规则
原文地址:https://www.cnblogs.com/studio313/p/647825.html
最新文章
动态规划基础
贪心算法
补番
塞尔达传说
LeetCode222
LeetCode101
去掉数组重复的元素
用Delphi实现动态代理(1):概述 转
简单工厂模式
工厂方法模式
热门文章
抽象工厂模式
策略模式
观察者模式
模板方法模式
状态模式
中介模式
外观模式
Java正则匹配解析出时间
Java语言深入:构造方法调用浅谈
超实用的Java数组技巧攻略
Copyright © 2011-2022 走看看