HTML:
<div class="Container1">
<div class="search">
<h1>Discover</h1>
<ul>
<h3>Search</h3>
<li class="genre"><a href="#">Genre</a></li>
<hr class="hr">
<li class="top1"><a href"#">Pop</a></li>
<li class="top2"><a href="#">Electronic</a></li>
<li class="bottom">
<a href="#" class="bottom1">Indie Rock</a>
<a href="#" class="bottom2">Hip Hop</a>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
CSS:
.clearfix { clear: both;}
.Container1 {
background-image:url(../img/bcg_slide-1.jpg);
background-size: 1920px auto;
background-repeat:no-repeat;
background-position:center center;
width: 100%;
height:auto;
}
.search {
background-color:#c44367;
opacity: 0.6;
padding-top: 5%;
padding-bottom: 5%;
margin: 0 auto 0 auto;
}
.search h3 {
text-align:center;
max-width:25%;
margin: 0 auto 0 auto;
color:#FFF;
border-bottom:none;
}
.search ul { text-align: center;}
.search ul li {
display: block;
text-align:center;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:200;
color:#FCFCFC;
list-style-type: none;
margin: 1% auto;
}
.search ul li a{
display: inline-block;
width: 100%;
text-align:center;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:200;
color:#FCFCFC;
list-style-type: none;
text-decoration:none;
padding: 1%;
}
.top1, .top2, .bottom a {
border:solid 1px #F5F5F5;
}
.hr {
color:#F5BDE2;
opacity:0.5;
width:15%;
}
.genre{
background-color:#F5BDE2;
text-align:center;
color:#FFFFFF;
border:none;
padding: 1% 10%;
margin:0 auto 0 auto;
border-radius:25px;
width:15%;
}
.genre:hover {
border:none;
}
.bottom {
width:50%;
}
.search ul li a.bottom1 {
width: 30%;
float: left;
}
.search ul li a.bottom2 {
width: 60%;
float: right;
}
.top1 {
width: 30%;
}
.top2 {
width: 50%;
}
li a:hover {
background-color:#F5BDE2;
text-align:center;
color:#FFFFFF;
}