Zomato's alternate country-city list implementation

I am an avid user of Zomato. Recently, they gave the website a visual uplift.

I was interested in the country city list section on the homepage which looked like this

Now, I wanted see and how they implemented the city list menu. On first guess it looked like CSS hover implementation.
Inspecting it using Firebug revealed the same.

One thing that caught my attention was the use of

position: relative

on the country name span with the class

hp-country-item

I dig further to see why they used this style.

Now you get it. They are positioning the menu using

position: absolute

and giving it a

left: -60 

IMHO, this can be done using margins only and there is no need to use

top right bottom left

I'll show you how to do this.

1. Remove

   position: relative

   from

   hp-country-item

2. Change the hover state display style of

   hp-city-list

   to

   display: inline-block

3. Remove

   left: -60

   from

   hp-city-list

   
4. The menu block will now be placed in the natural layout except that it is positioned

   absolute

   So, it won't consume the space it was supposed to consume in the layout. If you look closely, the menu block starts just at the place where country image ends. So now all you need to do is adjust its

   margin-left

   Menu block has a fixed width of 130px and country image block has a width of 26px;
   Moving the menu block by (26 + 130/2)px = 91px will bring the menu block to its correct position.
   Thus, we set

   margin-left: -91px

   
5. The caret (arrow) seems to be broken now.
   To fix this, add a

   margin-bottom: 1px

Reel vs Real Love

Falling in love is tough. And to get loved back is even tougher.

Bollywood taught us that the hero and heroine always fall in love. Boy meets the girl, falls in love, persuades her, and finally succeeds in getting a positive nod. Now, they sing and dance on streets and hill top for no reason. The only thing left is approval from parents for a happy married life. After some initial resentment, even the parent give the approval. Not to forget, the friends of both the party play a vital role in achieving this feat. They provide all the necessary help.

Life seems so easy and beautiful.

There is no better feeling the world than to fall in love.

Pause.

My piece of advice. Beware! The above stunts are performed by professionals. Please do not try this at school or college.

Real life is different. You consider yourself the hero and the girl you love as the heroine. You fall in love. Remember, its still you who have fallen and not the girl. You always act good to her. You try to maintain a good image in front of her. All that is done for one reason – the day you say your feelings aloud to her, she shouldn't refuse.

But there is a catch.

If she seemed beautiful to you, same was seen by your friends as well. Since this is not a movie, you just got competitors. So, more heroes for a single heroine. On an average the ratio seen is 1:5. So, five heroes trying their luck hard to catch one heroine. Each trying their way out to impress her. One good at academics helps her out in all projects. Other good at conversing, calls her up daily to be in touch. Other one bickers with her all the time to gather her attention. Not to forget, extra-curricular activities like singing, playing cricket etc can be of added benefit to you. All try to act as good friends to her with the real intentions, unmentioned.

So, as compared to movies where the probability of being loved back was almost one, it drops to one-fifth in real life. Eighty percent less chance. Even mathematics gives you the idea of how tough it is!