Here is an example for CSS menu creation without using JavaScripts. The Accordion menu is simply made up withCSS2 and for some other gradient effects I just use CSS3 also. Each menu item is enclosed in div called accordion, and each menu item is a group of menu and its content. First we set all the menu items overflow property as hidden, then simple increase the height on mouse over css.

View Demo

HTML

<div id="accordion">
    <div>
        <h6>Home</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>Demos and Downloads</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>About Us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div>
        <h6>Contact Us</h6>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

CSS

#accordion div{
	font: 12px Arial, Verdana, sans-serif;
	color:#424242;
	background: #fff;
	padding: 10px;
	width: 500px;
	overflow: hidden;
	height:25px;

}
#accordion div p{
	padding:0 10px;
}
#accordion div h6{
	font: 12px Arial, Verdana, sans-serif;
	text-shadow: 1px 1px 1px #d4d4d4;
	color:#424242;
	cursor:pointer;
	margin:0;
	padding:10px 10px;
	background: #8f8f8f;
	background: -moz-linear-gradient( top, #cecece, #8f8f8f); /* FF, Flock */
	background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f)); /* Safari, Chrome */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f); /* IE 5.5 - IE 7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";   /* IE 8 */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-weight:bold;
}
#accordion div:hover {
	height:100px;
}
#accordion div:hover h6 {
	color:#424242;
	font-weight:bold;
	background: #2288dd;
	background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
	background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
	color:#FFF;
	text-shadow: 1px 1px 1px #2288dd;
}

Hope you would understand the logic used in css, just drop yours comments at the bottom.

Thanks!!!