With the help of good HTML code and simple CSS rules, you can create a nice pop-up menu that can be easily modified and supplemented. By using markup language and Cascading Style Sheets, you can ensure that menus work correctly in all browsers.
Instructions
Step 1
First, build the basic structure of your menu. Open a text editor and create a numbered list with a submenu that acts as a parent list item. For example:
-
First element
- Dropdown item
- Dropdown2
Step 2
Save the generated list in a separate html file. Next, create a file with a.css extension and enter all the style sheet parameters.
Step 3
Remove any padding and bullets that apply in the bullet list and set the menu width using CSS tools: ul {list-style: none;
width: 200px; }
Step 4
Set the relative position of all items in the list using the position attribute: ul li {position: relative; }
Step 5
Next, you need to design a submenu, each of the elements of which will appear to the right of the parent menu at the moment when the mouse pointer is on the item: li ul {position: absolute;
left: 199px;
top: 0;
display: none; } The left attribute is one pixel less than the width of the menu itself. This allows you to correctly position the pop-up items without creating double borders. The display attribute is used to hide the submenu when opening the page.
Step 6
Style the links as desired using the appropriate css options. Include the display: block parameter so that each link takes up all the space it has reserved for it.
Step 7
To make the menu appear at the moment when the cursor is over it (hover), you need to enter the code: li: hover ul {display: block; }
Step 8
Set additional options for displaying links and list items as desired.
Step 9
The pop-up menu is ready. Now it remains to include the attribute in the.html file: Pop-up menu
