zoukankan
html css js c++ java
符合WEB标准的div+css导航下拉菜单
<
html
xmlns
="http://www.w3.org/1999/xhtml"
lang
="zh-CN"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
52css.com - css菜单演示
</
title
>
<
style
type
="text/css"
>
<!--
*
{
}
{
margin
:
0
;
padding
:
0
;
border
:
0
;
}
body
{
}
{
font-family
:
arial, 宋体, serif
;
font-size
:
12px
;
}
#nav
{
}
{
line-height
:
24px
;
list-style-type
:
none
;
background
:
#666
;
}
#nav a
{
}
{
display
:
block
;
width
:
80px
;
text-align
:
center
;
}
#nav a:link
{
}
{
color
:
#666
;
text-decoration
:
none
;
}
#nav a:visited
{
}
{
color
:
#666
;
text-decoration
:
none
;
}
#nav a:hover
{
}
{
color
:
#FFF
;
text-decoration
:
none
;
font-weight
:
bold
;
}
#nav li
{
}
{
float
:
left
;
width
:
80px
;
background
:
#CCC
;
}
#nav li a:hover
{
}
{
background
:
#999
;
}
#nav li ul
{
}
{
line-height
:
27px
;
list-style-type
:
none
;
text-align
:
left
;
left
:
-999em
;
width
:
180px
;
position
:
absolute
;
}
#nav li ul li
{
}
{
float
:
left
;
width
:
180px
;
background
:
#F6F6F6
;
}
#nav li ul a
{
}
{
display
:
block
;
width
:
156px
;
text-align
:
left
;
padding-left
:
24px
;
}
#nav li ul a:link
{
}
{
color
:
#666
;
text-decoration
:
none
;
}
#nav li ul a:visited
{
}
{
color
:
#666
;
text-decoration
:
none
;
}
#nav li ul a:hover
{
}
{
color
:
#F3F3F3
;
text-decoration
:
none
;
font-weight
:
normal
;
background
:
#C00
;
}
#nav li:hover ul
{
}
{
left
:
auto
;
}
#nav li.sfhover ul
{
}
{
left
:
auto
;
}
#content
{
}
{
clear
:
left
;
}
-->
</
style
>
<
script
type
=text/javascript
>
<!--
//
--><![CDATA[//><!--
function
menuFix()
{
var
sfEls
=
document.getElementById(
"
nav
"
).getElementsByTagName(
"
li
"
);
for
(
var
i
=
0
; i
<
sfEls.length; i
++
)
{
sfEls[i].onmouseover
=
function
()
{
this
.className
+=
(
this
.className.length
>
0
?
"
"
:
""
)
+
"
sfhover
"
;
}
sfEls[i].onMouseDown
=
function
()
{
this
.className
+=
(
this
.className.length
>
0
?
"
"
:
""
)
+
"
sfhover
"
;
}
sfEls[i].onMouseUp
=
function
()
{
this
.className
+=
(
this
.className.length
>
0
?
"
"
:
""
)
+
"
sfhover
"
;
}
sfEls[i].onmouseout
=
function
()
{
this
.className
=
this
.className.replace(
new
RegExp(
"
( ?|^)sfhover\\b
"
),
""
);
}
}
}
window.onload
=
menuFix;
//
--><!]]></script>
</
head
>
<
body
>
<
ul id
=
"
nav
"
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品介绍
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
产品一
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务介绍
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二服务二
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二服务二服务二
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
服务二
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
成功案例
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
案例三
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
案例
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
案例三案例三
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
案例三案例三案例三
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
关于我们
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
我们四
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
我们四
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
我们四
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
我们四111
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
在线演示
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示演示演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示演示演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示演示演示
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
演示演示演示演示演示
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系我们
</
a
>
<
ul
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系联系联系联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系联系
</
a
></
li
>
<
li
><
a href
=
"
http://www.52css.com
"
>
联系联系联系
</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
查看全文
相关阅读:
全网通5X_AL10 非定制版 固件汇总
system.new.dat解压工具sdat2img
linux 平台中 Android5.0的更新包中system.new.dat文件的解包
【 henuacm2016级暑期训练-动态规划专题 A 】Cards
【BZOJ 1486】 [HNOI2009]最小圈
【BZOJ 1433】[ZJOI2009]假期的宿舍
【BZOJ 1412】[ZJOI2009]狼和羊的故事
【BZOJ 1305】[CQOI2009]dance跳舞
【Codeforces Round #483 (Div. 2) C】Finite or not?
【Codeforces Round #482 (Div. 2) C】Kuro and Walking Route
原文地址:https://www.cnblogs.com/liuweitoo/p/920439.html
最新文章
php get_magic_quotes_gpc()函数使用
CSDN博客文章的备份及导出电子书CHM
Mysql 存储引擎
中文字串截取无乱码的问题
Google's new "Android Things" OS hopes to solve awful IoT security
(6) Switching Performance – Chaining OVS bridges
(5) Linux Network Namespaces – Background
(4) Switching Performance – Connecting Linux Network Namespaces
(3) Linux Switching – Interconnecting Namespaces – brctl – ovs-vsctl – veth pair
(2) How to find namespaces in a Linux system
热门文章
(1) Linux Network Namespaces
veth pair
How to Build LineageOS rom for any android device Easily ! {Full guide}
Linux 之父 Linus Torvalds:盲目“创新”不如埋头苦干
在线LaTeX编辑器
Linux wps 在新窗口(不是标签页)打开文件 :使用 -w 选项 启动 WPS
Compile LineageOS for Oneplus 3 on Fedora 25
LineageOS 14.1 for Xiaomi Redmi 3/Prime
Android开篇
MPTCP
Copyright © 2011-2022 走看看