html div菜单栏,纯css菜单栏

button,hr,input {

overflow:visible

}

audio,canvas,progress,video {

display:inline-block

}

progress,sub,sup {

vertical-align:baseline

}

html {

font-family:sans-serif;

line-height:1.15;

-ms-text-size-adjust:100%;

-webkit-text-size-adjust:100%

}

body {

margin:0

}

menu,article,aside,details,footer,header,nav,section {

display:block

}

h1 {

font-size:2em;

margin:.67em 0

}

figcaption,figure,main {

display:block

}

figure {

margin:1em 40px

}

hr {

box-sizing:content-box;

height:0

}

code,kbd,pre,samp {

font-family:monospace,monospace;

font-size:1em

}

a {

background-color:transparent;

-webkit-text-decoration-skip:objects

}

a:active,a:hover {

outline-width:0

}

abbr[title] {

border-bottom:none;

text-decoration:underline;

text-decoration:underline dotted

}

b,strong {

font-weight:bolder

}

dfn {

font-style:italic

}

mark {

background-color:#ff0;

color:#000

}

small {

font-size:80%

}

sub,sup {

font-size:75%;

line-height:0;

position:relative

}

sub {

bottom:-.25em

}

sup {

top:-.5em

}

audio:not([controls]) {

display:none;

height:0

}

img {

border-style:none

}

svg:not(:root) {

overflow:hidden

}

button,input,optgroup,select,textarea {

font-family:sans-serif;

font-size:100%;

line-height:1.15;

margin:0

}

button,input {

}button,select {

text-transform:none

}

[type=submit],[type=reset],button,html [type=button] {

-webkit-appearance:button

}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {

border-style:none;

padding:0

}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {

outline:ButtonText dotted 1px

}

fieldset {

border:1px solid silver;

margin:0 2px;

padding:.35em .625em .75em

}

legend {

box-sizing:border-box;

color:inherit;

display:table;

max-width:100%;

padding:0;

white-space:normal

}

progress {

}textarea {

overflow:auto

}

[type=checkbox],[type=radio] {

box-sizing:border-box;

padding:0

}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {

height:auto

}

[type=search] {

-webkit-appearance:textfield;

outline-offset:-2px

}

[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {

-webkit-appearance:none

}

::-webkit-file-upload-button {

-webkit-appearance:button;

font:inherit

}

summary {

display:list-item

}

[hidden],template {

display:none

}

/*# sourceMappingURL=normalize.min.css.map */

body {

background:-webkit-linear-gradient(top,#F68344 0.00%,#98370F 60.00%);

background:linear-gradient(top,#F68344 0.00%,#98370F 60.00%);

background-size:2500px 1600px;

background-repeat:no-repeat;

font-weight:300;

-webkit-font-smoothing:subpixel-antialiased;

font-size:100%;

font-family:Helvetica;

}

#warp {

background:-webkit-linear-gradient(top,#F68344 0.00%,#98370F 60.00%);

background:linear-gradient(top,#F68344 0.00%,#98370F 60.00%);

background-size:2500px 1600px;

background-repeat:no-repeat;

position:relative;

width:800px;

height:200px;

margin:100px auto 0px;

padding:5px;

display:block;

text-align:center;

border-radius:10px;

}

#menu {

border-bottom:1px solid #DDD;

position:relative;

background:-webkit-linear-gradient(top,#F8F8F8 0.00%,#EFEFEF 32.86%,#D7D7D7 68.93%,#CFCFCF 100.00%);

background:linear-gradient(top,#F8F8F8 0.00%,#EFEFEF 32.86%,#D7D7D7 68.93%,#CFCFCF 100.00%);

height:50px;

width:700px;

margin:auto;

list-style:none;

border-radius:0 15px 0 0;

box-shadow:0 2px 1px 0 #BEBEBE,0 4px 1px -1px #B8B8B8,0 6px 1px -2px #B3B3B3,0 8px 1px -3px #ADADAD,0 10px 1px -4px #AAAAAA,0 12px 1px -5px #A7A7A7,0 14px 1px -6px #9C9C9C,0 16px 1px -7px #939393,0 18px 1px -8px #8B8B8B,0 20px 1px -9px #666666,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 20px 4px -6px rgba(0,0,0,0.9),0 45px 5px -5px rgba(0,0,0,0.05),0 35px 10px -5px rgba(0,0,0,0.1),0 25px 55px 5px rgba(0,0,0,0.15);

z-index:0;

margin:100px auto;

}

#menu:before {

content:"";

}

#menu:after {

content:"";

}

#menu li {

background:transparent;

padding:0px;

width:80px;

height:62px;

margin:0px;

overflow:hidden;

line-height:50px!important;

-webkit-transition:all .5s ease-out;

transition:all .5s ease-out;

}

/* hover statut */

#menu li:hover,#menu li.active {

background:-webkit-linear-gradient(top,#F58246 0.00%,#ED7F44 32.86%,#CC7244 68.93%,#BE6E48 100.00%);

background:linear-gradient(top,#F58246 0.00%,#ED7F44 32.86%,#CC7244 68.93%,#BE6E48 100.00%);

z-index:2;

width:80px;

top:-8px;

border-radius:10px 10px 0 0;

border-top:1px solid #f7a273;

border-left:none;

border-right:none;

text-align:center;

box-shadow:0 2px 1px 0 #963004,0 4px 1px -1px #852A03,0 6px 1px -2px #812802,0 8px 1px -3px #7D2803,0 10px 1px -4px #661F01,0 12px 1px -5px #521A02,0 14px 1px -6px #401601,0 16px 1px -7px #3C1501,0 18px 1px -8px #2D1001,0 20px 1px -9px #110500,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 10px 20px rgba(0,0,0,0.75),0 20px 4px -6px rgba(0,0,0,0.9),0 45px 5px -5px rgba(0,0,0,0.05),0 35px 10px -5px rgba(0,0,0,0.1),0 25px 55px 5px rgba(0,0,0,0.15);

z-index:0;

-webkit-transition:background border-radius 0.75s ease-in;

transition:background border-radius 0.75s ease-in;

-webkit-transition:box-shadow 0.5s ease-in;

transition:box-shadow 0.5s ease-in;

}

#menu li.active {

background-color:#DADADA

}

.item:hover {

position:relative;

display:inline-block;

text-align:center;

}

/* item */

.item {

font-size:100%;

position:relative;

display:inline-block;

text-align:center;

}

.item:hover:before,.active.item:before {

content:"";

background:-webkit-linear-gradient(top,rgba(247,144,88,0.05) 60.00%,rgba(147,50,14,0.5) 100.00%);

background:linear-gradient(top,rgba(247,144,88,0.05) 60.00%,rgba(147,50,14,0.5) 100.00%);

display:block;

height:200px;

width:200px;

border-radius:100px;

position:absolute;

top:-130px;

left:-120px;

z-index:-1;

}

/* item separateur */

.item:after {

content:"";

padding:0px;

width:0px;

height:12px;

top:20px;

display:block;

position:absolute;

border-left:1px solid rgba(0,0,0,0.1);

border-right:1px solid rgba(255,255,255,0.1);

z-index:2;

}

.item:hover:after,.item.active:after {

content:"";

display:none;

}

/* lien */

.item a {

text-align:center;

color:#787878;

font-size:70%;

text-decoration:none;

text-shadow:0px 1px 0px white;

}

.item:hover a,.item.active a {

text-align:center;

color:#FFF;

z-index:10;

font-weight:lighter;

text-shadow:0px 1px 0px black;

width:80px;

display:block;

}

a,a:hover {

color:black;

text-decoration:underlink;

}