A stylish 3D menu on pure CSS

Kind time of day dear visitor of our site. Today I want to share with you a wonderful stylish 3D menu for your site that is created on pure CSS without the use of JS code.

At development of sites there is often a question how to create a menu for the site, because correct, convenient and beautiful navigation is one of the most important elements of any web resource.

Web masters often do not pay much attention to the creation of the menu, which is not entirely true in my opinion. Each site should be unique and it should have its own zest, so why not show your imagination and do something unusual and attractive.

And so, as already mentioned above, in today's article we will create a horizontal menu with stylish 3D effects when hovering, as everything will look like you can see in the demo example that we will add at the bottom of the page.

We will start creating a menu for the site:

First of all we need to create HTML markup for our menu:

As you can see in the HTML markup of the menu there is nothing ordinary, the standard table li list, so I think it's easy to understand, you can easily add or modify new sub-paragraphs.

Next will be css code for the created menu, in this lesson this is just the most basic. In this css code we'll add a transformation with which menu subitems will fall out, add some standard base styles, and apply the rotateX function with which we define the rotation angle, and we'll add a gradient fill with which we'll create smooth transitions and shadows.

And so below the code itself css:

That's all that was needed to create a beautiful menu for your site. Use on health!

You can see a live example on our website: