Creating CSS Vertical Menu with hover effect

  Sample of the pdf document:

In this tutorial we are going to create a vertical rollover menu using Unordered List  and CSS.

Step 1 Create a button design in Photoshop, below you can see my design.

Open Dreamweaver

1.                  Open a new HTML document

2.                  Go to text on the upper part of the menu bar and select UL

3.                  Type three titles  for you links you should have this result

• Link 1
• Link2
• Link3

4.                  Click on UL  below the menu bar and in the selector name the ID menu

5.                  Create a CSS style sheet go to new >css and save as menu.css

6.                  Open the HTML file make sure you are on UL and link the CSS style sheet

RULE 1

Click on the icon to create a new rule and set the following

·         Compound

·         Selector name UL#menu

·         Click OK

·         Select BOX

·         List – none and bullets near text should go

·         BOX width of image designed in PhotoShop in my case 150px

·         Place border – solid – 1px – blue

RULE 2

Click on the icon to create anew rule and set the following

·         Compound

·         BOX – 150W – 32H (the height is half the designed image size)

·         Border – solid 1px – Red......

 Click here for  Download PDF / FREE