* { margin:0; padding:0; list-style:none; } body { background-color:#f2f2f2; } ul { position:relative; width:800px; height:40px; border-bottom:2px solid skyblue; margin:50px auto; line-height:40px; } li { text-align:center; width:25%; height:100%; float:left; transition:color .3s; } li:hover { color:white; } li.bg { position:absolute; background:skyblue; top:0; left:0; z-index:-1; } div.content { position:relative; width:800px; min-height:300px; line-height:300px; margin:40px auto; text-align:center; border:1px solid silver; border-radius:30px; } div.content>div { position:absolute; width:100%; height:100%; left:0; top:0; } div.content>div:nth-of-type(1) { color:wheat; } div.content>div:nth-of-type(2) { color:aquamarine; } div.content>div:nth-of-type(3) { color:palegreen; } div.content>div:nth-of-type(4) { color:plum; } button { display:block; margin:0 auto; width:120px; height:30px; background:#87CEEB; color:white; border-radius:15px; outline:none; }