Instruction
1
Create a menu, determine its structure. Place the items in convenient for future user order. Think about clear and literate titles. Define the items that must be drop-down, and sub-items that are in these drop-down lists.
2
Apply the invented structure using html tags. It will look something like the following: <div id="vmenu"> <ul> <li><a href="#">Link 1.</a></li> <li><a href="#">Link 2.</a> <ul> <li><a href="#">section 2.1.</a></li> <li><a href="#">Item 2.2.</a></li> <li><a href="#">Item 2.3.</a></li> </ul></li> <li><a href="#">Link 3.</a> <ul><li><a href="#">Item 3.1.</a></li> <li><a href="#">Item 3.2.</a></li> <li><a href="#">Item 3.3.</a></li> <li><a href="#">section 3.4.</a></li></ul> </li></ul> </div>
3
Put the whole menu in a <div>. Set the id that will allow to assign features only to this unit without affecting the others. Specify the ID of a name, properties which describe in the following steps.
4
Create a list where <ul> is the list itself, and <li> - each of its rows. Add all future silcock that should create a drop-down menu, your list with sub-items. Turn the menu titles into links by enclosing them in a tag <a>. Set its href parameter address of the page you will want to reference.
5
Set list properties through css by specifying them in the css file: #vmenu ul { margin:0px; padding:0px; list-style:none; width:250px; }. Set zero padding padding - padding inside and margin - outside the indentation of the list item. Specify the list-style - bullet style defaults to the dots, if none are removed. Enter the width list the width.
6
Add list item properties: #vmenu ul li { position:relative; }. Specify positioning, that is, the layout of the position. Assign a relative value relative to determine the location drop-down menu with respect to the original. The generated menu will be vertical.
7
Specify properties for the list item in another list: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Set the positioning position absolute is to implement the absolute positioning of the submenus relative to the menu item. Set the location using the indent space to the left of left and top to top. Determine the display parameter of the display element to none, because initially the dropdown list should not be visible.
8
Make the settings for the links: #vmenu ul li a { display:block; padding:5px; text-decoration:none; color:#606060; background:#d8d8d8; }. Set the display option display value is block, making the block element. However, he is visible and behaves as a unit. Set the indent for padding, text color, links color, background color, link background, link style text-decoration. A value of none removes the default underline.
9
Set the action when the mouse cursor: #vmenu li:hover ul { display: block; }. Specify that when you hover over a row in the list li, ul listing, located in it is visible.
10
Add optional parameters colors or background images, horizontal line, font, links, and other properties that define the appearance menu.