The first tutorial on 365 Web Applications is a horizontal drop down menu.  This enables web site users to navigate through the entire site structure from any page on the site.  It also has a secondary benefit of being an SEO friendly sitemap.

Horizontal Menu

Horizontal Menu


The first thing you’ll need to do is figure out where on your page you want to position your menu.  Then in this location paste the following html code.
Tip: Place the menu in an include file or define it as a Dreamweaver library item to make updating your sites navigation easier.

Once you have placed the menu structure into your page, you’ll need to setup the stylesheet for your menu.

Stylesheet: A stylesheet defines the look and feel of the content on your site. It is what makes links blue, puts borders on tables, sets font sizes, etc. Typically a website has one or more of these depending on the complexity and size of the site. If you don’t already use stylesheets on a regular basis, start using them and you’ll save a lot of time and frustration down the road when you want to make changes to the look of your site. more…

Place this in a file called menu.css wherever you typically keep your stylesheet (.css) files. If you don’t have one setup, you can place it in the same directory as the pages that are using the menu.

div.nav
{
	width: 820px;
	height: 37px;
	background-color: #4F669A; /* Sets the menu background color */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	vertical-align: bottom;
	text-align: left;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
}

#nav, #nav ul {
	float: left;
	width: 800px;
	list-style: none;
	line-height: 33px;
	font-weight: bold;
	vertical-align: bottom;
	padding: 0 9px 0 1px;
	border: 0;
	margin: 0 0 0 0;
}

#nav a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	text-align: left;
	vertical-align: bottom;
	color: #fff;
	padding: 2px 2px 2px 0px;
}

#nav a:hover,active
{
	color: #663300;
	font-weight: bold;
	background-color: #D4BD9D;
}

#nav li {
	float: left;
	color: #fff;
	padding: 0 18px 0 6px;
	text-align: left;
	vertical-align: bottom;
	border-right: 1px solid #fff;
}

#nav li.last {
	border-right: none;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	overflow: visible;
	width: 125px;
	font-weight: normal;
	border-width: 0.25em;
	margin: 0px 0 0 -6px;
	padding: 0;
	background-color: #D4BD9D;
}

#nav li ul li {
	padding-left: 4px;
	padding-right: 10px;
	line-height: 20px;
	width: 111px;
	text-align: left;
	clear: both;
	float: left;
}

#nav li ul.list-right li {
/*	float: right !important; */
}

#nav li ul a {
	min-width: 100%;
	color: #663300;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	color: #663300;
	background: #D4BD9D;
}

Then include the css file in your page by pasting the following code in the section.

   <!-- title, meta tags, etc. are here -->