1. Create a 500x500 document (best if you have space to work in). Fill the background in with the color 7D7D7D
2. Select the rounded rectangle tool and make a rectangle on your page, fill this in with the foreground color, white. press d then x on your keyboard. your foreground color and background color should now be white and black. if this is correct, proceed to the next step.

3. Select your gradient tool and from the bottom of the rectangle, hold shift and move the gradient up, let go.

4. After this, give your image a gaussian blur of 1.5. If followed correctly, your image should now look like the following. Preview

5. Create a new layer, but ctrl+click on your first layer (the gardiented rectangle). so you're gradient rectangle is selected, but you're on the new layer. like shown Preview

6. Go-to Select > Modify > contract...contract this by 4. That dotted rectangle should now have moved in by 4pixels, like show. Preview

7. Fill this in with white, right click this rectangle and go to 'Blending Options'. Give it an (Leave the settings as default, just changing as stated below) Outerglow Blend Mode : Normal Color: Black Opacity: 75% Gradient Overlay Opacity: 41% Stroke: Size: 1 Opacity: 54% Color: Black Your image should now look like this Preview

YOUR NAV BOX IS NOW NEAR ENOUGH COMPLETE, IF YOU WANT TO LEAVE IT LIKE THIS AND JUST ADD YOUR TEXT, GO AHEAD. BUT OTHERWISE, FOLLOW ON.

8. Create another small rectangle just at the top of the current one, so it's like a small heading. Give it another gradient like the first box you did, but this time set the gaussian blur to 1.0, Set the opacity of this box to 16%, so you now have something like this Preview

9. Add some text 10. A few inset lines and you're done. :D Final Image:

Preview