<div id="container">
<nav>
<ul class="cf">
<li predictive-item><a href="#">Menu Item 1</a></li>
<li predictive-item><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li predictive-item><a href="#">Menu Item 3</a></li>
</ul>
</nav>
<button predictive-item>Button Item</button>
</div>
#container {
width: 900px;
height: 550px;
margin: 20px auto;
background-color: #f2f2f2;
position: relative;
border-radius: 10px;
box-sizing: border-box;
text-align: center;
}
nav ul {
background: #ddd;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
nav li {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
min-width: 33%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav .dropdown:after {
content: " \25bc";
}
nav li:hover a {
background: lightgreen;
}
nav li ul {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
width: 100%;
}
nav li ul a:hover {
background: #65e765;
}
button {
background: #ddd;
color: #444;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
min-width: 33%;
border: 0px;
margin-top: 200px;
}
button:hover {
background: lightgreen;
cursor: pointer;
}
This Pen doesn't use any external CSS resources.