To create simple drop downs using twitter bootstrap, it is fairly easy for developers. The issue faced in Susper, however, was to add a tip on the top over such dropdowns similar to Google:

This is how it looks finally, in Susper, with a tip over the standard rectangular drop-down:

This is how it was done:

1. First, make sure you have designed your drop-down according to your requirements, added the desired height, width and padding. These were the specifications used in Susper’s drop-down.

2. Next add the following code to your drop-down class css:

In css, :before inserts the style before any other html, whereas :after inserts the style after the html is loaded. Some of the parameters are explained here:

• Top: can be used to change the position of the menu tip vertically, according to the position of your button and menu.
• Right: can be used to change the position of the menu tip horizontally, so that it can be positioned used below the menu icon.
• Position : absolute is used to make sure all our values are absolute and not relative to the higher div hierarchically
• Border: All border attributes are used to specify border thickness, color and transparency before and after, which collectively gives the effect of a tip for the drop down.
• Content : This value is set to a blank string ‘’, because otherwise none of our changes will be visible, since the divs will have no space allocated to them.

Resources

• This stack-overflow question helped me implement the tip feature: https://stackoverflow.com/questions/17107123/add-tip-to-twitter-bootstraps-dropdown-menu
• You can use this tutorial if you need a basic idea on implementing drop downs: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp