Im realtively new to html/css and having trouble finding a way to make an element that I want. Ill start off with saying that I am using Material Design Lite in a rails project.

So what Im trying to do is I have a grid of search results and Im trying to create a filter bar that users can select different tags and characteristics to filter the results. The html and form part to filter the results I can handle the part that Im having trouble figuring out is the way I want the layout...

Im trying to create a bar across the top with different categories and when the user clicks on one of the categories a box expands with all the different filtering options for that category. Similar to a menu dropdown but looking to make it part of the group so if they choose another category it will close the first one and open the new one instead. 

Im looking for a push in the right direction to find a tutorial or example that will get me in the right direction. For a visual reference for what Im thinking the recipe website yummly uses this kind of system...heres a screen shot:

[![enter image description here](https://i.stack.imgur.com/o1PyQ.png)](https://i.stack.imgur.com/o1PyQ.png)