<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>navigation</
title
>
<
meta
charset
=
"UTF-8"
>
<
link
rel
=
"shortcut icon"
type
=
"text/css"
href
=
"ico/icow.ico"
>
<
link
rel
=
"stylesheet"
href
=
"fontawesome-4.2.0/4.2.0/css/font-awesome.css"
>
<
link
rel
=
"stylesheet"
href
=
"slider.css"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
href
=
"style.css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
div
class
=
"example"
>
<
div
id
=
"line-can"
>
<
ul
id
=
"navigation"
>
<
li
><
a
href
=
"https://www.baidu.com/"
><
span
class
=
"fa fa-th-large"
>Home</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-heart-o"
>My hobby</
span
></
a
>
<
div
>
<
ul
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
html</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
css</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
javascript</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
jquery</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
ajax</
span
></
a
></
li
>
</
ul
>
</
div
>
</
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-desktop"
>Work</
span
></
a
>
<
div
>
<
ul
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
design</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
thinking</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
inspiration</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
efficiency</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
englis</
span
></
a
></
li
>
</
ul
>
</
div
>
</
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-music"
>music</
span
></
a
>
<
div
>
<
ul
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
kata no kyoukai</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
Recreator</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
Nire</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
Crystal</
span
></
a
></
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-chevron-circle-right"
>
BGM</
span
></
a
></
li
>
</
ul
>
</
div
>
</
li
>
<
li
><
a
href
=
""
><
span
class
=
"fa fa-quote-right"
>Bolg</
span
></
a
></
li
>
<
li
><
a
style
=
"border-right:none;"
href
=
""
><
span
class
=
"fa fa-link"
>About</
span
></
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>
@import
"https://fonts.googleapis.com/css?family=Pacifico"
;
body
{
background-image
:
url
(
images/background3.png
);
margin
:
0
px
;
padding
:
0
px
;
}
.example
{
width
:
1000
px
;
height
:
800
px
;
background-color
:
#424644
;
position
:
relative
;
margin
:
-23
px
240
px
;
}
#line-can
{
position
:
relative
;
width
:
800
px
;
height
:
53
px
;
margin
:
33
px
auto
;
background-color
:
none
;
border-radius
:
10
px
;
box-shadow
:
2
px
3
px
4
px
#32363c
;
background-color
:
#272822
;
}
#navigation
{
position
:
absolute
;
width
:
720
px
;
height
:
51
px
;
top
:
-16
px
;
left
:
22
px
;
border-radius
:
10
px
;
overflow
:
hidden
;
}
#navigation
li
{
position
:
relative
;
z-index
:
20
;
width
:
112
px
;
float
:
left
;
left
:
-27
px
;
list-style
:
none
;
border-radius
:
10
px
;
}
#navigation
li
a
{
list-style
:
none
;
background-color
:
#272822
;
line-height
:
35
px
;
display
:
inline-block
;
position
:
relative
;
text-decoration
:
none
;
color
:
#bea7bf
;
font-family
: STHeiti,
'Segoe UI'
,
Tahoma
, Geneva,
Verdana
,
sans-serif
;
z-index
:
30
;
font-weight
:
bold
;
font-size
:
15
px
;
width
:
151
px
;
height
:
40
px
;
border-radius
:
10
px
;
}
/*make element transtion*/
#navigation
ul
{
position
:
absolute
;
display
:
inline-block
;
background
:
#272822
;
top
:
-250
px
;
transition
:
0.8
s
ease-in-out
;
-moz-transition
:
0.8
s
ease-in-out
;
width
:
134
px
;
height
:
207
px
;
border-radius
:
10
px
;
margin-top
:
30
px
;
z-index
:
3
;
left
:
22
px
;
box-shadow
:
4
px
4
px
0
px
#353836
;
}
#navigation
li
:hover
ul
{
transform
:
translate
(
0
,
280
px
);
}
#navigation
li
:hover
{
color
:
rgba
(
97
,
32
,
72
);
}
#navigation:hover
{
height
:
280
px
;
}
#navigation
>li>a
{
line-height
:
47
px
;
left
:
17
px
;
padding-left
:
25
px
;
width
:
91
px
;
height
:
51
px
;
border-left
:
1
px
solid
#615555
;
border-radius
:
unset
;
}
#navigation
li
a
:hover
{
background-color
:
#642E64
;
}
/*add some fontawesome*/
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
