zoukankan
html css js c++ java
很酷的css菜单
<
html
>
<
head
>
<
STYLE
type
=text/css
>
#navigation
{
}
{
background
:
#99CCFF
;
width
:
715px
;
margin
:
0 auto
;
height
:
38px
;
/**/
/*
hide overflow:hidden from IE5/Mac
*/
/**/
/*
\
*/
overflow
:
hidden
;
/**/
/*
*/
}
#navigation ul
{
}
{
margin
:
0
;
padding
:
0
;
list-style-type
:
none
;
background
:
transparent
;
}
#navigation li
{
}
{
display
:
block
;
float
:
left
;
margin
:
0 1px
;
}
#navigation .snazzy
{
}
{
background
:
transparent
;
}
#navigation .snazzy span
{
}
{
text-align
:
center
;
color
:
#fff
;
margin
:
0
;
font-weight
:
normal
;
}
#navigation .b1, #navigation .b2, #navigation .b3, #navigation .b4
{
}
{
display
:
block
;
font-size
:
1px
;
/**/
/*
hide overflow:hidden from IE5/Mac
*/
/**/
/*
\
*/
overflow
:
hidden
;
/**/
/*
*/
}
#navigation .b1, #navigation .b2, #navigation .b3
{
}
{
height
:
1px
;
}
#navigation .b2, #navigation .b3, #navigation .b4
{
}
{
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
#navigation .b1
{
}
{
margin
:
0 5px
;
background
:
#fff
;
}
#navigation .b2
{
}
{
margin
:
0 3px
;
border-width
:
0 2px
;
}
#navigation .b3
{
}
{
margin
:
0 2px
;
}
#navigation .b4
{
}
{
height
:
2px
;
margin
:
0 1px
;
}
#navigation .boxcontent
{
}
{
display
:
block
;
border-left
:
1px solid #fff
;
border-right
:
1px solid #fff
;
}
#navigation a.menu, #navigation a.menu:visited
{
}
{
display
:
block
;
text-decoration
:
none
;
width
:
100px
;
font-family
:
Arial, Helvetica, sans-serif
;
font-size
:
14px
;
}
#navigation a.current span, #navigation a.current:visited span
{
}
{
padding-top
:
10px
;
}
#navigation a.menu:hover
{
}
{
background
:
transparent
;
cursor
:
pointer
;
}
#navigation a.current:hover
{
}
{
cursor
:
default
;
}
#navigation a.menu:hover span
{
}
{
padding-top
:
10px
;
}
#navigation .red
{
}
{
background
:
#c00
;
}
#navigation .orange
{
}
{
background
:
#f90
;
}
#navigation .yellow
{
}
{
background
:
#b8b800
;
}
#navigation .green
{
}
{
background
:
#090
;
}
#navigation .blue
{
}
{
background
:
#00c
;
}
#navigation .indigo
{
}
{
background
:
#309
;
}
#navigation .violet
{
}
{
background
:
#c6c
;
}
#navigation .lace
{
}
{
background
:
#e0e0d5
;
}
#navigation .slate
{
}
{
background
:
#bcdae9
;
}
#navigation .salmon
{
}
{
background
:
#ffa07a
;
}
#navigation .mint
{
}
{
background
:
#f5fffa
;
}
span
{
}
{
background
:
#000
}
</
STYLE
>
</
head
>
<
body
>
<
center
>
<
DIV
id
=navigation
>
<
UL
>
<
LI
><
A
class
=menu
title
="AccessKey: a"
accessKey
=a
href
="../menu/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent red"
>
Demos
</
SPAN
>
<
B
class
="b4 red"
></
B
><
B
class
="b3 red"
></
B
><
B
class
="b2 red"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
=menu
title
="AccessKey: b"
accessKey
=b
href
="../menus/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent orange"
>
Menus
</
SPAN
>
<
B
class
="b4 orange"
></
B
><
B
class
="b3 orange"
></
B
><
B
class
="b2 orange"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
="menu current"
title
="AccessKey: c"
accessKey
=c
href
="#nogo"
><
B
class
=snazzy
><
SPAN
class
="boxcontent yellow"
>
Layouts
</
SPAN
>
<
B
class
="b4 yellow"
></
B
><
B
class
="b3 yellow"
></
B
><
B
class
="b2 yellow"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
=menu
title
="AccessKey: d"
accessKey
=d
href
="../boxes/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent green"
>
Boxes
</
SPAN
>
<
B
class
="b4 green"
></
B
><
B
class
="b3 green"
></
B
><
B
class
="b2 green"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
=menu
title
="AccessKey: e"
accessKey
=e
href
="../mozilla/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent blue"
>
Mozilla
</
SPAN
>
<
B
class
="b4 blue"
></
B
><
B
class
="b3 blue"
></
B
><
B
class
="b2 blue"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
=menu
title
="AccessKey: f"
accessKey
=f
href
="../ie/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent indigo"
>
Explorer
</
SPAN
>
<
B
class
="b4 indigo"
></
B
><
B
class
="b3 indigo"
></
B
><
B
class
="b2 indigo"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
>
<
LI
><
A
class
=menu
title
="AccessKey: g"
accessKey
=g
href
="../opacity/index.html"
><
B
class
=snazzy
><
SPAN
class
="boxcontent violet"
>
Opacity
</
SPAN
>
<
B
class
="b4 violet"
></
B
><
B
class
="b3 violet"
></
B
><
B
class
="b2 violet"
></
B
><
B
class
=b1
></
B
></
B
></
A
></
LI
></
UL
>
</
DIV
>
<!--
end of navigation
-->
</
center
>
</
body
>
</
html
>
查看全文
相关阅读:
LeeCode-Invert Binary Tree
LeeCode-Contains Duplicate
LeeCode-Linked List Cycle
LeeCode-Number of 1 Bits
LeeCode-Delete Node in a Linked List
LeeCode-Same Tree
LeeCode-String to Integer (atoi)
单链表复习
POJ1258 (最小生成树prim)
HDU1248 (完全背包简单变形)
原文地址:https://www.cnblogs.com/chengulv/p/298541.html
最新文章
CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
为什么用IP无法访问网站,域名可以访问?
sublime插件emmet的配置、使用及快捷键Ctrl+E修改成Tab键操作
大三下学期十四周总结
Java Executor框架使用
大三下学期十三周总结
Java多线程下载初试
大三下学期十二周总结
大三下学期十一周总结
大三下学期第十周总结
热门文章
创建线程的三种方式
大三下学期第九周总结
模拟面试总结4
LeeCode-Remove Element
LeeCode-Swap Nodes in Pairs
LeeCode-Sort Colors
LeeCode-Roman to Integer
LeeCode-Remove Duplicates from Sorted List
LeeCode-Single Number II
LeeCode-Majority Element
Copyright © 2011-2022 走看看