Selecting parent menu should show child menu - css

Question

I am developing a Wordpress site and trying to display my menu as shown in image. How can I display the sub menu when the parent menu is selected?

Answer 1

You can create your main top links with secondary nested like so
<ul class="primary">
<li>Tutorial</li>
<ul class="secondary">
<li>Photoshop</li>
<li>Illustrator</li>
<li>Flash</li>
<li>HTML</li>
<li>PHP</li>
<li>Wordpress</li>
<li>jQuery</li>
<li>more...</li>
</ul>
<li>Wallpaper</li>
<li>Get A Quote</li>
<li>Photography</li>
<li>Freelance</li>
</ul>
then your styling would be like so ( this is using just CSS3, not JS )
<style>
ul.primary {
width: -- ;
height: -- ;
margin: -- ;
overflow: hidden;
}
ul.primary > li {
width: -- ;
height: -- ;
margin: -- ;
float: left;
list-style: none;
}
ul.seconday {
opacity: 0;
width: -- ;
height: -- ;
margin: -- ; /* when this is used with position: relative you can adjust where the drop down is placed. */
position: relative; /* need to set this to relative to position properly */
/* css3 transition */
transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}
ul.primary > li:hover ul.secondary {
opacity: 1;
}
</style>