* { 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; }