Expression Web help

Relax Join our community

Visit our Expression Web Forum

Drop down menus in expression web

Drop down menus are a much sought after effect in expression web. Using lists, CSS and a dwt we can make drop down menus for our expression web, web sites, that are, easy to update, easy to re-style and search engine friendly. This page uses a dropdown menu and the basic style was derived from this example

The example codes given here are the work of Stu Nicholls. CSSPlay

I visit Stu's site weekly just to sit back and be inspired, he truly is a great CSS master please do visit him and remember to give credit to stu if you use the menu example.

I would suggest that you build your menu into a DWT. This allows you to add or remove links in just one place and the changes will be made site wide. This is very simple to do and will save you huge amounts of time in the future. Just make sure you put the code into a non editable region. If you put it into an editable region, future changes to the menu will only apply to new pages. The existing pages will not be updated!

Hopefully, you already have a web template built? And somewhere in that template you have a div ready to be used for the navigation. If not then you have to make s space to hold the menu. Horizontal menus are usually placed just under the #mastehead (banner) so directly under the div that holds your banner insert a new div.

This page has a div called #top_nav, this is the div that i pasted the code into, having removed my existing navigation. Then apply the style sheet and the menu will appear.

Again in this pages example, i have further developed the menu by having styles for the #top_nav div links! In essence, overriding the style rule in the actual menu CSS which is separate from the site CSS rules.

For example:-

#top_nav a:hover {
color: #CCF0FF;
background-color: #0087BF;

All this bit of code is saying is keep the link as it is but with a text color change and a background color change for any links in the #top_nav div, when hovered.

You can download the XHTML and the CSS files in zip format here.


 RSS Icon  RSS

Reader not listed? Click here for more options

Expression Web Help RSS
Expression Web Help. Tips and Tricks and tutorials Get our feed now

My status