Creating A Simple CSS Menu (with description)

I'm trying to create a css menu similar to the one on this site: http://www.webfinity.org/contact.html I can't quite get it look like that, much less have the description. I was wondering if someone can help me with making something similar to that.

Thanks

 

That looks like the SprAssets menu system that comes with Adobe Dream Weaver.

 

Easily done with Jquery. See this tutorial, easily found with Google.

http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

 

Thanks for the reply guys, however what I'm interested in is a menu with a description not a drop down menu.

Jeremhowell that looks like something I can work with but how would I add a description under the menu title. If you look at the menu of the link I'd provided above you will see under Home it says Back Home, Company = About Us, Products = Hosting, Domains, etc. That is what I'm trying to replicate.

 

<span style="display:block;">Hello</span>
<span style="font-size:8pt;">Hello world</span>

Code (markup):

Simply add that in your <a> tag and style it how you like. The trick is setting the display of the first, second or both elements to block.

 

Jeremy`s right. Nice menu, still. Thanks for sharing

 

Thanks everybody, I have created the navigation and the css file. But it's not showing the effects. Can you guys tell me what I've missed?

The HTML Portion

<div class="navigation">

				<ul>
					<li><a href="www.mysite.com"><span style="display:block;">Home</span><span style="font-size:8pt;">Front Page</span></a></li>

					<li><a href="www.mysite.com"><span style="display:block;">About</span><span style="font-size:8pt;">Our History</span></a></li>					

                    <li><a href="www.mysite.com"><span style="display:block;">Services</span><span style="font-size:8pt;">Our Services</span></a></li>

					<li><a href="www.mysite.com"><span style="display:block;">Contact</span><span style="font-size:8pt;">Reach Us</span></a></li>			
                </ul>
			
</div>

HTML:

The CSS Portion

/* Navigation

	-------------------------------------------------------------------------------------- */

	#navigation{

		background:url(images/navigation_bg.png);

		display:block;

		width:960px; 

		height:63px;

	}

	#navigation li{

		background:url(images/menu_separator.png) no-repeat right top;

		display:block; float:left;

		line-height:15px;

		width:150px; height:63px;

		position:relative;

	}

	#navigation li a{

		font-size:13px;

		color:#ccc;

		display:block;

		padding:15px 0 0 20px;

		text-transform:uppercase;

	}

	#navigation li a span{

		color:#6c6c6c;

		clear:both;

		display:block;

		font-size:11px;

		text-transform:lowercase;

	}

		/* Sub navigation */

		#navigation .sub-menu{

			display:none;

			background:#000;

			position:absolute;

			top:62px;

			left:0;

			z-index:9995;

			padding:0 15px 15px 15px;

	}

	#navigation .sub-menu li{

			clear:both;

			background:none;

			height:auto;

	}

	#navigation .sub-menu li a{

			display:block;

			margin:0;

			padding:5px;

			border-bottom:1px dotted #252525;

		text-transform:lowercase;

	}

		

HTML:

 

#navigation refers to an element with an id of navigation, but you have set the div to have a class of navigation, in which case your css should be .navigation (notice the perios in place of hash). Or just change the class=navigation to id=navigation.

Merry Christmas mate, have a good day.

 

Normally I would use

<ul id="navigation">

Code (markup):

instead of a div element.

Here is a variation of the CoDrops OverlayMenu. I made some changes and still not done yet (still fixing for IE9).
It is combined with tinyScroll.

http://www.xhtml-valid-websites.com/demos/jquerydropdown-with-tinyscroll/

Oh btw, merry xmas Jeremy