Tip: Check Your works at least on three most popular browsers.

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.

Use Rounded Rrectangle Tool (U), set Radius to 20 px and use settings showed bellow. For foreground color set #1d97bc. After that drag four guidelines.

Now select Pen Tool (P), hold CTRL (Or just use Direct Selection Tool) and click near our rectangle border. You will see path of our shape layer. Next zoom on top left corner, hold ALT key (or use Convert Point Tool), and press on two points (1, 2). Then unhold ALT (or use Delete Anchor Point Tool) key and click on one point (3) - this will delete it. Now press CTRL (Or use Direct Selection Tool) key, catch the point (4) and hold mouse key!. Unhold CTRL (But still hold mouse key!), press SHIFT and drag this point to our guides.

Make same thing with bottom right corner. Final result should look like this one bellow

Apply Blending Options like bellow.

Type "Menu" on the top.

Next use Pencil Tool (B), on new layer draw horizontal line (black color), and next another line under it (white color). Change Layer Opacity to 18%. Duplicate this layer (CTRL+J) and move it 27 px lower. Repeat it five more times.

Between two lines make selection using Rectangular Marque Tool (M), create new layer and fill selection using #75c5de color. Make this same thing for other menu positions.

Now write some text using Horizontal Type Tool (T)

Now we have to make Hoover effect.
Make selection over one button, make new layer, place it under text layers. Use Gradient Tool (G) and fill the selection.

Now the final result

You can learn how to slice and code this menu from my two other tutorials:
1. Slice Your web graphic properly.
2. CSS graphic menu with rollovers