Change submenu (dropdown) direction from vertical to horizontal

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>


1 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.

dropdown-content

display:flex;

flex-direction: row

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.

border-radius: 5px;

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.

ul

li

.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>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.