zoukankan
html css js c++ java
一个符合WEB标准的横向下拉菜单
<!
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"
lang
="zh-CN"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
meta
http-equiv
="Content-Language"
content
="zh-CN"
/>
<
title
>
横向下拉菜单
</
title
>
<
style
type
="text/css"
>
<!--
*
{
}
{
margin
:
0
;
padding
:
0
;
border
:
0
;
}
body
{
}
{
font-family
:
arial, 宋体, serif
;
font-size
:
12px
;
}
#nav
{
}
{
height
:
24px
;
list-style-type
:
none
;
padding-left
:
200px
;
line-height
:
24px
;
overflow
:
hidden
;
background
:
#999
;
}
#nav a
{
}
{
display
:
block
;
width
:
80px
;
text-align
:
center
;
}
#nav a:link
{
}
{
color
:
#EEE
;
text-decoration
:
none
;
}
#nav a:visited
{
}
{
color
:
#EEE
;
text-decoration
:
none
;
}
#nav a:hover
{
}
{
color
:
#FFF
;
text-decoration
:
none
;
font-weight
:
bold
;
background
:
#CCC
;
}
#nav li
{
}
{
float
:
left
;
width
:
80px
;
}
#nav li ul
{
}
{
line-height
:
24px
;
list-style-type
:
none
;
text-align
:
left
;
left
:
-999px
;
width
:
520px
;
//注意,这里一定要设置宽度;
position
:
absolute
;
background
:
#CCC
;
}
#nav li ul li
{
}
{
float
:
left
;
width
:
80px
;
//float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a
{
}
{
display
:
block
;
width
:
65px
;
text-align
:
left
;
padding-left
:
15px
;
}
#nav li ul a:link
{
}
{
color
:
#F1F1F1
;
text-decoration
:
none
;
}
#nav li ul a:visited
{
}
{
color
:
#F1F1F1
;
text-decoration
:
none
;
}
#nav li ul a:hover
{
}
{
color
:
#FFF
;
text-decoration
:
none
;
font-weight
:
normal
;
background
:
#C00
;
}
#nav li:hover ul
{
}
{
left
:
25%
;
}
#nav li.sfhover ul
{
}
{
left
:
25%
;
}
#content
{
}
{
clear
:
left
;
}
-->
</
style
>
<
script
type
="text/javascript"
>
<!--
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
="#"
>
菜单一
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单一
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="#"
>
菜单二
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单二
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单二
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单二
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单二
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单二
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="#"
>
菜单三
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单三
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单三
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单三
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单三
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单三
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="#"
>
菜单四
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单四
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单四
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单四
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单四
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单四
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="#"
>
菜单五
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单五
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单五
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单五
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单五
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单五
</
a
></
li
>
</
ul
>
</
li
>
<
li
><
a
href
="#"
>
菜单六
</
a
>
<
ul
>
<
li
><
a
href
="#"
>
菜单六
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单六
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单六
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单六
</
a
></
li
>
<
li
><
a
href
="#"
>
菜单六
</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
查看全文
相关阅读:
How to Automate IIS 7 Configuration with .NET
windows phone 学习
Redis VS. Memcached
ROWNUM使用方法
摘自----聊聊盛大的经验值
理解Sql语句
Odp.net 动态创建变量in
ORACLE PLSQL DEVELOPER 中显示科学计数法
http error 500.22 internal server error
Resharper8 visual studio 中文版 快捷键无法使用
原文地址:https://www.cnblogs.com/studio313/p/647824.html
最新文章
诡异的事件,记录一下
Ubuntu 更换阿里云软件源(转)
在linux上ubuntu搭建hustOJ系统
在ubuntu上安装最新稳定版本的node及npm
Sublime text3配置C编译环境
Asp.net WebForm使用codeFirst建立和修改数据库小结
ASP.NET MVC RedirectToRoute类[转]
MD5Provider 的摘要说明
DES算法加密解密
Cookie辅助类
热门文章
任何时候都用得到的:命名规范和代码风格
要素过多的博客美化[酌情筛选]
另类解法:当出现TypeError: The view function did not return a valid response...
Excel随机生成批量日期,以及注意事项
关于向SQL Server导入Excel出错的统一解决方法
Python连接不上SQL Server的两种根治思路
Pycharm、vs、sql一键注释的快捷键!
编辑代码的两个Tab快捷键,节省大量时间!
鼠标一拖,即刻快速删除大量文件!——批处理bat
这些让操作顺滑无比的快捷键,你知道多少?
Copyright © 2011-2022 走看看