Change submenu (dropdown) direction from vertical to horizontal - html

Question

Right now I have dropdown menus in a vertical direction like this:
I want to change the dropdown menu so that they appear in a horizontal direction, preferred centered of a menu item:
I am using divs (.dropdown, .dropdown-content)
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
width: 150px;
height: auto;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-bottom: 10px;
}
How can I change the direction and alignment?
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
<hr class="horizontal">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
<hr class="horizontal">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div><br>
<div class="titleh3">Name</div>
</div>
</div>

Answer 1

You can use FlexBox to achieve the wanted result. Keep in mind, that flexbox is farily new and not supported in older browsers.
What I did:
Change the display-setting of dropdown-content to display:flex; and added flex-direction: row to align them horizontally.
Then I wrapped all dropdown-elements with a div to give every element of the dropdown some styling in case of need.
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-radius: 5px;
}
.dropdown-content {
/*display: none; //Change this to display flex, with the flex-direction to align the items horizontally*/
display: flex;
flex-direction: row;
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
height: auto;
border-radius: 5px;
padding-bottom: 10px;
}
.dropdown-content-element{
margin: 2px 5px;
padding: 5px;
}
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown-content-element">
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
<div class="dropdown-content-element">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
<div class="dropdown-content-element">
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</div>
</div>
</div>
And here is a little cheatsheet to get you started with FlexBox.
EDIT:
This works, but without being centered on the selected supermenu-item. But you'll achieve that yourself, I trust in you!
Oh and by the way: You can sum up your border-radius rules with border-radius: 5px; if all are the same. Saves some space and maintains better readability.
EDIT 2:
Here is an example of using ul and li to achieve a similar result. This method was suggested by #Moose in one of his comments.
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
outline: none;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
font-family: inherit;
margin: 0;
width: 150px;
height: 160px;
border: 1px solid white;
border-radius: 5px;
}
.dropdown-content {
/*display: none;*/
position: absolute;
background-image: linear-gradient(#F1F1F1, #E5E5E5);
border: 1px solid white;
height: auto;
border-radius: 5px;
padding-bottom: 10px;
}
.dropdown-list {
list-style: none;
}
.dropdown-list>li {
display: inline-block;
}
<div class="dropdown">
<button class="dropbtn" data-showdiv="CO">
<div class="titleh2">Title</div>
<img class="orga" src="picture.png">
<div class="titleh1">Name</div>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
<a href="#" class="firstImage">
<img class="orga" src="\untitled.png" />
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
<li>
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
<li>
<a href="#">
<img class="orga" src="\untitled.png">
</a>
<div class="titleh2">Title</div>
<div class="titleh3">Name</div>
</li>
</ul>
</div>
</div>