With the help of competent HTML code and simple CSS rules, you can create a pop-up menu, supplement it and modify it. By using the cascading tables and markup language tools, you can ensure that the menu itself works correctly in all browsers.
Instructions
Step 1
Hold on to the basic menu bar first. Create a special numbered list with a submenu in a text editor. Usually "Notepad" is used for these purposes. The submenu acts as an element of the parent list. For example: First Item Drop Item Drop Item 2 Drop Item 3 Drop Item 4 Drop Item 5
Step 2
Save this list in a separate html file. Then create a.css file. Enter all the required style sheet parameters. Do this very carefully, because one mistake, and the pop-up menu will not display correctly or will not work at all.
Step 3
Remove any bullets and padding applied in the bullet list. Set the width of the menu using CSS tools: ul -style: none; width: 200px; }
Step 4
Mark the relative position of all the items in the list with an attribute called position: ul li: relative; }
Step 5
Then arrange the submenu, the elements of which will appear from the parent menu to the right when the mouse cursor is over the item: li ul: absolute; left: 199px; top: 0; display: none; }
Step 6
The left attribute is one pixel less than the width of the menu itself. This allows pop-up items to be positioned correctly without creating double borders. The display attribute is used to hide the submenu when opening the page.
Step 7
Style the links as needed using the appropriate css options. Include the display: block parameter so that the links take up all the space reserved for them. To make the menu appear when the mouse cursor is hovering over it, enter the following code: li: hover ul: block; }
Step 8
Set additional options for displaying list items and links as desired. Include an attribute in the.html file. The pop-up menu is ready to use.
