* {
margin:0;
padding:0;
color:white;
outline:none;
}
ul {
font-size:0;
}
ul,li {
list-style:none;
}
.box {
font-size:14px;
width:100%;
}
.one li {
font-size:14px;
width:20%;
line-height:60px;
margin:0 auto;
text-align:center;
display:inline-block;
background-color:#FFA500;
}
.one li:hover {
background-color:#6B8E23;
color:#FFA500;
}
#box .two {
color:#000;
width:20%;
line-height:60px;
text-align:center;
font-size:0px;
position:absolute;
display:none;
}
#box .two li {
width:100%;
}
#box .two li:hover {
background-color:gold;
color:#fff;
}
#box .one {
position:relative;
}
#box .two2 {
left:20%;
}
#box .two3 {
left:40%;
}
#box .two4 {
left:60%;
}
#box .two5 {
left:80%;
}
#box .one .one_1:hover .two1 {
display:block;
}
#box .one .one_2:hover .two2 {
display:block;
}
#box .one .one_3:hover .two3 {
display:block;
}
#box .one .one_4:hover .two4 {
display:block;
}
#box .one .one_5:hover .two5 {
display:block;
}