Помогите сделать выпадающее меню с активными подпунктами

[galaydas]

Всем привет, вот такая у меня проблема, может кто сталкивался, сделал горизонтальное меню, с выпадающими вниз подпунктами

Активной ссылке и активному пункту подменю присваивается class active

Как можно сделать так, как ЗДЕСЬ, только средствами css или другими скриптами ?

Пока что сделал так:

<div id="menu_glav">
    <ul>
    <li><a href="index4.html">Gallery</a>
    <ul>
    <li><a href="index2.html">Concept</a></li>
    <li><a href="index2.html">Shows</a></li>
    </ul>
    </li>
    <li><a href="index6.html">Artworks</a>
    <ul>
    <li><a href="index2.html">New</a></li>
    <li><a href="index2.html">Archives</a></li>
    <li><a href="index2.html">Academy</a></li>
    </ul>
    </li>
    <li><a href="#">CV</a></li>
    <li><a href="index3.html">News</a></li>
    <li><a href="#">Mass Media</a>
    <ul>
    <li><a href="index2.html">New</a></li>
    <li><a href="index2.html">Archives</a></li>
    <li><a href="index2.html">Academy</a></li>
    </ul>
    </li>
    <li><a href="#">Contacts</a></li>
    </ul>


    </div>

#menu_glav { 
    margin:6px 0 0 0px; 
    font-size:14px; 
    font-weight: bold; 
    float:right;}

#menu_glav ul { 
    list-style:none;} 

#menu_glav ul li {
    margin:0 30px 0px 0; 
    float:left;}

#menu_glav ul li a {
    color:#666; 
    text-decoration:none; 
    background:url(../img/a_u_hover.png) right no-repeat; 
    padding-right:15px;}

#menu_glav ul li a:hover {
    color: #000; 
    background:url(../img/a_u.png) no-repeat right; 
    text-decoration:none;}

#menu_glav ul{
    float:left;
    width:100%;
    position:relative;	
    margin-bottom:10px;
}

/*— ВЫПАДАЮЩИЕ ПУНКТЫ —*/
#menu_glav ul ul{
	float:left; font-size:12px; font-weight:normal; 
	position:absolute; padding-right:20px; width:100%;
	left:-9999px;
	opacity:0; 
	-webkit-transition:0.25s linear opacity; 
}
#menu_glav ul ul li{
	padding-top:10px; padding-bottom:20px; padding-left:13px; 
	float: left; margin-right:10px !important;
	background: url(../img/point_a.png) no-repeat left; 
}
#menu_glav ul ul a{
	white-space:nowrap; 
	display:block; 
        background:none !important;} 

#menu_glav ul li:hover ul{ 
	left:0; 
	opacity:1; 
}
#menu_glav ul li:hover a{ 	
	text-decoration: none; 
        background:url(../img/a_u_hover.png) right no-repeat; 
        color:#000;
}

#menu_glav ul li ul li:hover a{ 	
	text-decoration: none; 
        color:#000 !important; 
}
#menu_glav ul li ul li a{ 	
	text-decoration: none; 
        color:#666 !important; 
}

#menu_glav .active ul  { 
    float:left; font-size:12px; font-weight:normal; 
	position:absolute !important; padding-right:20px; width:100%; overflow:hidden !important;
	left:0px !important; display:block !important;
	opacity:1 !important; 
	-webkit-transition:0.25s linear opacity; 

}

#menu_glav ul li ul .active a  { color:#F33 !important;}	
#menu_glav .active a  { color:#000;}

Не знаю что и делать.