The menus in Pure are vertical by default, so we will see it first. To use the vertical menu classes like pure-menu, pure-menu-list, pure-menu-heading, etc. are used. Don't think that it is complex, it is not, just use the classes at the correct place and you will be able to create a menu quickly.
In Pure, we take the help of lists to create a menu and we have appropriate classes for everys step. Look at the syntax below, it is long but easy. Notice the different classes and the elements they are used with to create a menu-
These menus are horizontally aligned as the name suggests. To create a horizontal menu, you just have to add the pure-menu-horizontal class along with pure-menu. This simple addition will make the menu horizontally aligned. Look at the example below to notice the placement of the classes because student often get confuse with the place of a particular class.
If you want to make a menu in which the selected menu item appeared as currently selected by a change in some CSS property you can use the pure-menu-selected class and to disable an item you can use the class pure-menu-disabled. Look at the example below to notice the changes in the buttons of different classes.
A dropdown menu is also very essential and is used widely. In Pure, You can create dropdown menu by making some small changes. Add the class pure-menu-has-children to the menu item under which you need a dropdown menu and then make another list for the dropdown.
To continue using the hover effect on the submenu also, include the class pure-menu-allow-hover.
The example will clear all your doubts. Practice this in the editor to become more fluent.