How to create a ccs drop down menu?
I'm quite new and was wondering how I can create a drop-down menu. I'm aware the question has been asked many times. However, I can't find the solution without having to rewrite my header. I appreciate the help and apologize in advance if the solution is simple and I haven't figured it out yet.
.header {
width: 100%;
height: 80px;
display: block;
text-align: left;
color: #2d3a49;
background: #f5f5f5;
}
.inner_header {
width: 70%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1 {
color: #2d3a49;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Open Sans';
font-size: 40px;
font-weight: 200;
}
.logo_container h1 span {
font-weight: 800;
}
.navigation {
float: right;
height: 100%;
}
.navigation li {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation li a {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Open Sans';
font-size: 20px;
}<div class="header">
<div class="inner_header">
<div class="logo_container">
<h1>Wise <span>Software</span></h1>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<ul>
<li><a href="#">Food</a></li>
<li><a href="#">Recipes</a></li>
</ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Price</a></li>
</ul>
</div>
</div>Maybe something like the accompanying snippet could be of use. You would need to create a div to house the dropdown content, in addition to a button that would trigger the dropdown menu to appear when hovered upon. Feel free to style accordingly.
.header {
width: 100%;
height: 80px;
display: block;
text-align: left;
color: #2d3a49;
background: #f5f5f5;
}
.inner_header{
width: 70%;
height: 100%;
display: block;
margin: 0 auto;
}
.logo_container{
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: #2d3a49;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Open Sans';
font-size: 40px;
font-weight: 200;
}
.logo_container h1 span{
font-weight: 800;
}
.navigation{
float: right;
height: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown {
float: right;
overflow: hidden;
margin-right:50px;
background-color: black;
margin-top: 20px;
border-radius: 25px;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}<div class="header">
<div class="inner_header">
<div class="logo_container">
<h1>Wise <span>Software</span></h1>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Food</a>
<a href="#">Recipes</a>
<a href="#">Contact</a>
<a href="#">Price</a>
</div>
</div>
</div>