Dreamweaver Tutorial 3 Customize your Horizontal Spry MenuBar using CSS

When inserting any spry object Dreamweaver uses a default state. For the horizontal menu bar our default state is a light grey coloured menu bar, with a colour of blue applied for the rollover effect. In this Dreamweaver tutorial, we are going to customise the spry menu bar to match the content of our website. As stated during the tutorial I opted to use a gradient that could be easily identified on screen, usually I would select a nice subtle colour, but for this tutorial I have went for a vibrant red that will be easy to see on screen. The background I created was a simple red to lighter red gradient in Photoshop, for the over state I flipped the gradient 180 degrees.

Spry menu bar CSS

As explained in the first tutorial upon inserting your spry menu bar the CSS for this navigation bar will automatically appear in your CSS panel. Now we have applied some changes to the up state and over state using customized backgrounds, however there is so much else you can do through the spry menu bar CSS. It’s best to experiment through a trial and error process until you find what fits your website best.