The vertical dropdown menu is very handy - it saves space on the web page, while at the same time helps to easily navigate the site. Try to make a dropdown menu based on CSS - Cascading Style Sheets. If you are not yet an expert in creating CSS code, then use the purecssmenu.com service. You are required to select a menu type, customize its appearance, and then adapt it to your own site. The service itself will generate the necessary code, which you then insert into the files of your site.
Instructions
Step 1
Register on the website purecssmenu.com, otherwise you will not be able to download the created menu. Click the Templates button on the left side of the page. Below you will see several small windows with drop-down menu templates, clicking on which will load a preview on the right in the Preview window. Choose a template that suits your site
Step 2
Customize the font and color of the menu: use the Parameters tab. In the Font field, select a font, font size, if necessary, underline and bold. In the Colors field, set the menu background, font color, and font hover and background hover colors
Step 3
Open the Items tab to manage menu items. If you click the Clear recycle bin button, the sample items are cleared and you can create your own. To do this, press the Add Item plus button - the item will be added to the end of the menu. The Add Next Item button is used to add an item following the currently selected time. The Add Subitem button creates a sub-menu item for the selection. Accordingly, to remove an item, use the Remove Item button
Step 4
Pay attention to the Item Parameters field at the bottom of the site. In the Text line, specify the name of the menu item, in the Link line - the url of the page to which this item will lead. In the Tip line, you can leave a description of the item, which will be shown when you hover over the link. The Target line is used to determine the way to open the page to which the link leads. The _self parameter on this line opens the page in the same browser window as the current one
Step 5
After finishing setting up the menu, download it - click the Download button at the bottom right of the page (this function is available after registering on the site). Select a folder on your hard drive where the archive file will be saved. Unpack it. You will need to copy the required code from the purecssmenu.html file into your site's CSS template file. Open the purecssmenu.html file with a text editor and copy the code between the and tags into your site's CSS template (this file has a.css extension and looks something like file.css). Now paste the code into your site template (themes) file - the code from purecssmenu.html between the comments and instead of the regular menu code. To do this, you need to be at least a little familiar with programming. Make sure to paste the code into the correct file and save.
