[Tip] Drop Down Menu Tutorial (..for all themes)

[hariS.]

Code Select Expand

// Show the start of the tab section.
   echo '
<ul id="topmenu">';
// Show the [home] button.
echo '<li><a' , $current_action=='home' ? ' class="chosen"' : '' , ' href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [help] button.
echo '<li><a' , $current_action=='help' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a' , $current_action=='search' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a' , $current_action=='calendar' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a' , $current_action=='admin' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a' , $current_action=='profile' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a' , $current_action=='pm' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a ' , $current_action=='mlist' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li class="last"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

if ($context['user']['is_guest'])
{
echo '<li><a' , $current_action=='login' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';
echo '<li class="last"><a' , $current_action=='register' ? ' class="chosen"' : '' , ' href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';
}
echo '
</ul>';
}

// Generate a strip of buttons.

Could any one paste the code for this template , DS V1


Btw , here's the eror I get :

Code Select Expand


Parse error: syntax error, unexpected $end in .../Themes/dsV1_117/index.template.php on line 761

752: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
753:
754: <td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
755:
756: }
757:
758:
759:
760: ?>

761:

762:
763:


[Antechinus]

Told you before: we don't support illegal usage here. If you want support on DSv1 get a Dziner Studio Theme Club membership and you'll have access to the support boards for all their premium themes.

Oh and just for your information: I have already made a custom drop menu for DSv1. It's styled for the theme. Looks fantastic. Works in all browsers including IE6. There's a complete tutorial for it with everything you need to get it working perfectly. You can find it in the DSv1 support board at Dziner.

[InsaneMustang]

Can this tutorial be applied if I am using SMF 1.1.11?

[Antechinus]

It can.

[~DS~]

This tutorial is old and I believe it applied older SMF version. Looking one for 2.0 RC2

[Antechinus]

For which theme? Your site seems to be using a Curve variant and they already have drop menus.

[~DS~]

For which theme? Your site seems to be using a Curve variant and they already have drop menus.

Yes, I am trying to attempt a drop down on slogan like SMF on the top since there's no mod for it.

[Garou]

Have you looked at
http://www.simplemachines.org/community/index.php?topic=352811.0

If you apply whats in that thread along with some of the tips for drop down menus here you should be able to make it work.

[InsaneMustang]

It can.

On a scale of 1 to 10 (10 being the hardest) how hard is it to do this?

[Antechinus]

It was written for 1.1.x. It will work with any version of 1.1.x.

[p1tereq]

Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.

[~DS~]

Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.

Try this:
http://www.simplemachines.org/community/index.php?topic=360100.0

[p1tereq]

You're a legend.

Cheers, I let the rest know after working on this one.

[Divaksh]

Can i Use 2.0 RC2? ? ?

[[unplugged]]

Is there someone who can make this tutorial suitable for all 2.0 RC2 engine's?

Cheers,
Pete.

Try this:
http://www.simplemachines.org/community/index.php?topic=360100.0

That was just two posts above yours..........

[vishvijay]

I find all this stuff very useful very very thanks for providing such a useful information.

[sanax]

 ...it was probably asked before but there are so many pages in this thread. Is it possible to call the actual categories into the menu?

[harrysgantzias]

hi guys... very interesting topic!
i made a dropdown menu for my forum but i have a question.. i followed the instructions given in the first message of this topic...

what additions or changes to the php and css code do i have to make in order to create a Level3 in the dropdown?
i cannot make it work...
and i search the community and i found nothing about that...

i want to create something like that:

-Home
-Account
--Settings
---Notification settings
---Ultimate profile
---Appearance
---Account settings
--Profile
--Logout
-Contact us
-Links

SMF version: 1.1.11

Can anyone please help me with this? 
Thx in advance..

[harrysgantzias]

anybody??

[harrysgantzias]

I made it alone finally, with a guide (which u can find here: hxxp://ago.tanfa.co.uk/css/examples/menu/tutorial-v.html )

In the index.template.php i have this part of code:

Code Select Expand

// Show the start of the tab section.
   echo '
         <div id="menu">
               <ul class="menu">';

// Show the Home Button                     
echo'
<li class="level1"><a href="', $scripturl, '" class="level1"><span class="title">' , $txt[103] , '</span></a>
</li>';


// How about the [search] button?
         if ($context['allow_search'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=search" class="level1"><span class="title">' , $txt[182] , '</span></a>
</li>';

// New button... [multimedia]
        $chatPath = str_replace("index.php", "chat/index.php", $scripturl);
        $num = (empty($modSettings['enableChatButtonNo'])) ? 0 : count(chatOnlineUsers());
        if ($context['allow_edit_profile'])
        echo '
<li class="level1 parent"><a href="', $scripturl, '?action=media" class="level1"><span class="title">Ψυχαγωγία</span></a>
<ul class="level2">
  <li class="level2"><a href="', $chatPath, '"', empty($modSettings['chatPopUp']) ? 'target="_blank"' : ' onclick="openWindow(this.href);this.blur();return false;"', '" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/comments.png" style="margin-bottom:-3px;"> ', $txt['chat'], ($num > 0) ?  ('('.$num.')') : '' , '</span></a>
  </li>
  <li class="level2"><a href="', $scripturl, '?action=media" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/folder_camera.png" style="margin-bottom:-3px;"> ', $txt['aeva_gallery'], '<span style="float: right;">▶</span></span></a>
   <ul class="level3">
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=92" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/application_double.png" style="margin-bottom:-3px;"> Προγράμματα</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=3" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/music.png" style="margin-bottom:-3px;"> Αρχεία Ήχου</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=1" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/images.png" style="margin-bottom:-3px;"> Φωτογραφίες</span></a></li>
    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=media;sa=album;in=2" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/film.png" style="margin-bottom:-3px;"> Βίντεο</span></a></li>
   </ul>
  </li>                         
  <li class="level2"><a href="', $scripturl, '?action=calendar" class="level2"><span class="title"><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/callendar.png" style="margin-bottom:-3px;"> ' , $txt['calendar24'] , '</span></a>
  </li>               
</ul>
</li>';

// Is the user allowed to administrate at all? ([admin])
                  if ($context['allow_admin'])
                  echo '
                                  <li class="level1"><a href="', $scripturl, '?action=admin" class="level1"><span class="title">' , $txt[2] , '</span></a>
                <ul class="level2">
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=news" class="level2"><span>Ειδήσεις & ενημερωτικά δελτία</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=packages" class="level2"><span>Πακέτα</span></a>
                <ul class="level3">
                    <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=packages" class="level3"><span>Πακέτα</span></a></li>
                </ul>
            </li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=featuresettings" class="level2"><span>Χαρακτηριστικά & Επιλογές</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=theme;sa=admin;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Εμφάνιση και Διάταξη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=twittersettings" class="level2"><span>Twitter & Fb publisher Mod</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=globalhf;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Global Headers & Footers</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=admin;area=aeva_settings;sesc=ac9f8e1c4b8c4c3257b0d54378cdc6f3" class="level2"><span>Aeva Media</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=manageboards" class="level2"><span>Πίνακες</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=postsettings" class="level2"><span>Μηνύματα και θέματα</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=viewmembers" class="level2"><span>Μέλη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=membergroups;" class="level2"><span>Ομάδες μελών</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=permissions" class="level2"><span>Δικαιώματα</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=regcenter" class="level2"><span>Εγγραφές</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=ban" class="level2"><span>Απαγορεύσεις σε μέλη</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=maintain" class="level2"><span>Συντήρηση Δημόσιας συζήτησης</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=viewErrorLog;desc" class="level2"><span>Αρχείο καταγραφής σφαλμάτων</span></a></li>
            <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=modlog" class="level2"><span>Αρχείο καταγραφής συντονισμού</span></a></li>
                                  </ul></li>';

// Go to PM center... [pm]
       if ($context['user']['is_logged'] && $context['allow_pm'])
       echo '
<li class="level1 parent"><a href="', $scripturl, '?action=pm" class="level1 parent"><span class="title">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</span></a>
   <ul class="level2">
      <li class="level2"><a href="', $scripturl, '?action=pm" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email.png" style="margin-bottom:-3px;"> ' , $txt['hcm_readmessages'] , '</span></a></li>
      <li class="level2"><a href="', $scripturl, '?action=pm;sa=send" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email_edit.png" style="margin-bottom:-3px;"> ' , $txt['hcm_sendmessage'] , '</span></a></li>
   </ul>
</li>';

// Edit Account... [Account]
     if ($context['allow_edit_profile'])
     echo '
<li class="level1 parent"><a href="', $scripturl, '?action=profile" class="level1 parent"><span class="title">Λογαριασμός</span></a>
  <ul class="level2">
     <li class="level2"><a href="', $scripturl, '?action=profile" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/icons/profile_sm.gif" style="margin-bottom:-3px;"> Προφίλ<span style="float: right;">▶</span></span></a>
        <ul class="level3">
           <li class="level3"><a href="', $scripturl, '?action=profile" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/user.png" style="margin-bottom:-3px;"> Προβολή Προφίλ</span></a>
           <li class="level3"><a href="', $scripturl, '?action=profile;sa=forumProfile" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/user_edit.png" style="margin-bottom:-3px;"> Επεξεργασία Προφίλ</span></a>
        </ul>
     </li>
     <li class="level2"><a><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog.png" style="margin-bottom:-3px;"> Ρυθμίσεις<span style="float: right;">▶</span></span></a>
       <ul class="level3">
         <li class="level3"><a href="', $scripturl, '?action=profile;sa=account" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog_edit.png" style="margin-bottom:-3px;"> Ρυθμίσεις λογαριασμού</span></a>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=notification" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/cog_error.png" style="margin-bottom:-3px;"> Ρυθμίσεις ειδοποιήσεων</span></a></li>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=theme" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/eye.png" style="margin-bottom:-3px;"> Ρυθμίσεις εμφάνισης</span></a></li>
         <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=customized" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/vcard_edit.png" style="margin-bottom:-3px;"> Ρυθμίσεις πλήρους προφίλ</span></a></li>
       </ul>
     </li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=profile;sa=buddies" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group.png" style="margin-bottom:-3px;"> Λίστα φίλων</span></a>
     </li>
     <li class="level2"><a href="', $scripturl, '?action=mlist" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/members.gif" style="margin-bottom:-3px;"> Λίστα μελών<span style="float: right;">▶</span></span></a>
       <ul class="level3">
          <li class="level3"><a href="', $scripturl, '?action=mlist" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/members.gif" style="margin-bottom:-3px;"> ' , $txt['hcm_viewmembers'] , '</span></a></li>
          <li class="level3"><a href="', $scripturl, '?action=mlist;sa=search" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group_key.png" style="margin-bottom:-3px;"> ' , $txt['hcm_searchmembers'] , '</span></a></li>
          <li class="level3"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=13" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/group_gear.png" style="margin-bottom:-3px;"> Moderating Team</span></a></li>
       </ul>
     </li>
     <li class="level2"><a href="', $scripturl, '?action=help" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/help.png" style="margin-bottom:-3px;"> Βοήθεια</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=rules" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/script.png" style="margin-bottom:-3px;"> Κανόνες</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/door_in.png" style="margin-bottom:-3px;"> ' , $txt[108] , '</span></a></li>           
  </ul>
</li>';

// New button... [Contact]
    echo '
<li class="level1 parent"><a href="', $scripturl, '?action=contact" class="level1"><span class="title">' ,  $txt['smfcontact_contact'] , '</span></a>
  <ul class="level2">
     <li class="level2"><a href="', $scripturl, '?action=contact" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/email_go.png" style="margin-bottom:-3px;"> Επικοινωνήστε μαζί μας</span></a></li>
     <li class="level2"><a href="', $scripturl, '?action=help" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/help.png" style="margin-bottom:-3px;"> Βοήθεια</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=11" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/facebook.gif" style="margin-bottom:-3px;"> Fan Page στο Facebook</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=12" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/world.png" style="margin-bottom:-3px;"> Forum Alimentarius on Social Networks<span style="float: right;">▶</span></span></a>
       <ul class="level3">
        <li class="level3"><a href="http://www.facebook.com/pages/Athens-Greece/Forum-Alimentarius/353291482384" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/facebook.gif" style="margin-bottom:-3px;"> Fan Page on Facebook</span></a></li>
        <li class="level3"><a href="http://www.twitter.com/f_alimentarius" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/twitter.gif" style="margin-bottom:-3px;"> Follow us on Twitter</span></a></li>
        <li class="level3"><a href="http://www.perfspot.com/forumalimentarius" class="level3"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/perfspot.png" style="margin-bottom:-3px;"> Perfspot</span></a></li>
       </ul>
     </li>
  </ul>
</li>';

// New button... [pages]
            echo '
<li class="level1 parent"><a href="', $scripturl, '?action=pages" class="level1 parent"><span class="title">', !empty($modSettings['dozen_pages_tab_label']) ? $modSettings['dozen_pages_tab_label'] : $txt['dozen_pages_tab_default'], '</span></a>
   <ul class="level2">
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/aua.png" style="margin-bottom:-3px;"> Γεωπονικό Πανεπιστήμιο Αθηνών</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=2" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/aua.png" style="margin-bottom:-3px;"> Σελίδες Καθηγητών ΓΠΑ</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=4" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/agriculture.png" style="margin-bottom:-3px;"> Γεωπονικά - Αγροτικά</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=5" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/page_find.png" style="margin-bottom:-3px;"> Αναζήτηση Επιστημονικής Βιβλιογραφίας</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=7" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/book_open.png" style="margin-bottom:-3px;"> Ελληνικές Βιβλιοθήκες στο Διαδίκτυο</span></a></li>
     <li class="level2"><a href="http://www.gewponoi.com/trofima/index.php?action=pages;sa=6" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/link.png" style="margin-bottom:-3px;"> Food Science & Technology: Useful Links</span></a></li>
   </ul>
</li>';
 
// New button... [Lessons]
  echo '
<li class="level1 parent"><a href="http://www.gewponoi.com/trofima/ygieini" class="level1 parent"><span class="title">Εκπαιδευτικό Υλικό</span></a>
     <ul class="level2">
         <li class="level2"><a href="http://www.gewponoi.com/trofima/ygieini" class="level2"><span><img src="http://www.gewponoi.com/trofima/Themes/kai11x/images/bullet_black.png" style="margin-bottom:-4px;">Υγιεινή τροφίμων & εγκατ. βιομηχ. τροφίμων</span></a>
         </li>
     </ul>
</li>';
                                         
// If the user is a guest, show [login] button.
         if ($context['user']['is_guest'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=login" class="level1"><span class="title">' , $txt[34] , '</span></a>
</li>';
                           
// If the user is a guest, also show [register] button.
         if ($context['user']['is_guest'])
         echo '
<li class="level1"><a href="', $scripturl, '?action=register" class="level1"><span class="title">' , $txt[97] , '</span></a>
</li>';
                     

            echo '
                            </ul>
                  </div>';
         }


And i have this code in style.css :

Code Select Expand

/* DropDownMenu */

div#menu {
   float: auto;
   left: 0px;
   top: 0px;
   margin-top: 0px;
   z-index: 11;
   height: 36px;
   background: url('images/sep_black.png') no-repeat; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px;

}

div#menu ul {
   list-style: none;
   float: left;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;

}


div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px 0px 0px 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
   font-size: 12px;
   font-family: Arial
}
div#menu li a, #menu li span.separator {
   height: 36px;
   display: block;
   float: left;
   line-height: 40px;
   text-decoration: none;
   color: #000000;
   font-size: 11px;
}
div#menu li span {
   display: block;
}
div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;

}
div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #ffffff;
   font-size: 11px;
   background: url(images/catbg.jpg) #2A2A2C repeat-x; /*Change your submenu background color in here*/
}
div#menu li.active {
   font-weight: bold;
   font-size: 12px;

}
div#menu li.active ul {
   font-weight: normal;
   font-size: 12px;

}
div#menu li.parent span.separator {
   cursor: pointer;
}
div#menu ul.menu {
   padding-right: 1px;
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
}
div#menu ul.menu ul {
padding-right: 0px;
}
div#menu li.level1 {
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
}
div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat;
   height: 36px;
   color: #000000; /*Change your menu link color in here*/
   font-size: 12px; /*Change your menu font size in here*/
   padding: 0px 6px 0px 6px;   
}
div#menu a.level1 span, div#menu span.level1 span {
   padding: 5px 20px 5px 20px;
}
div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
   background: #513D2B url(images/catbg.jpg);
   background-position:left bottom;
   font-weight:bold;
   text-decoration:none;
}

div#menu li.active a.level1, div#menu li.active span.level1, div#menu li.active a.level2, div#menu li.active span.level2 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
   font-size: 11px;
}

div#menu a.level1 span.title, div#menu span.level1 span.title, div#menu a.level2 span.title, div#menu span.level2 span.title{
   padding: 0px;

}
div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #000000;
   margin-top: -6px;
   line-height: 10px;
}
div#menu a.level2 span.sub, div#menu span.level2 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #000000;
   margin-top: -6px;
   line-height: 10px;
}

div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub, div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub
{
   color: #000000;
   background: #695A43;
   background-position: left bottom;
   font-weight: bold;
   text-decoration: none;
}
div#menu ul.menu ul {
   position: absolute;
   top: 36px;
   left: -999em;
   width: 265px;
   font-size: 80%;
   border-bottom: 1px solid #402F14;
   border-top: 1px solid #402F14;
   border-left: 1px solid #402F14;
   border-right: 1px solid #402F14;
-moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topright: 4px;
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-top-left-radius: 4px;
   background: #cbc394; /*Change your submenu background color in here*/
}
div#menu ul.menu ul ul {
   position: absolute;
   display: none;
   top: 0px;
   width: 180px;
   font-size: 80%;
-moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topright: 4px;
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-top-left-radius: 4px;
   background: #cbc394; /*Change your submenu background color in here*/
}
div#menu li:hover ul, div#menu li.sfhover ul{
   left: 0px;
   z-index: 100; 
}
div#menu ul ul li:hover ul {
   left: 265px;
   z-index: 100;
   display: block;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 3px;
}
div#menu li.level2 li {
      width: 100%;
   text-indent: 3px;
}
div#menu li.level1 li a, div#menu li.level1 li span.separator {
   height: 25px;
   width: 265px;
   padding: 0px;
   margin: 0px 0px;
   border-right: 0px solid #000000;
   border-left: 0px solid #000000;
   float: none;
   display: block;
   line-height: 25px;
}

div#menu li.level2 li a, div#menu li.level2 li span.separator {
   height: 25px;
   width: 180px;
   padding: 0px;
   margin: 0px 0px;
   border-right: 0px solid #000000;
   border-left: 0px solid #000000;
   float: none;
   display: block;
   line-height: 25px;
}
/* End of DropDownMenu */



I don't know if all these in the style.css are required, because i m not a programmer. I was experimenting with this alone, and finally i made it work!
I put some 16*16 icons in the left side of the submenu to make it more friendly for members. These icons are a free set named "Silk icons". You can find them on the Internet for free (google it )
Finally, i have put a symbol "▶" in the right side of the level2 menu in those options that have another submenu.