Selecting parent menu should show child menu

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>