Sub menu options

Technical Details

Forum version : #PunBB
Position : Administrator
Concerned browser(s) : Mozilla Firefox, Google Chrome
Who the problem concerns : All members
Forum link : www.vielamort.net

Description of problem

In my theme its possible to have a drop down menu, however I want a sub menu to one of the options in the menu.

The option should be when you hover over "Racer" there will appear a list just besides it.

I've tried to make one, but it doens't seem to appear.. :s

Where is this menu?

It's located on the Navbar button 'Members'.

Located under "Members"

Each menu will need to have a different ID.

how should i do that?

Please post the code you created.  Please use the code tags when posting coding.

Code:

<div id="navbar">
            <div class="wrapper">
              <ul id="topnav">
                <li id="button_home"><a class="active firstlevel" href="/forum"><span class="last firstlevel">Home</span></a></li>
                <li id="button_demo"><a class="firstlevel" href="/#"><span class="firstlevel">Members</span></a>
                  <ul>
                    <li><a href="/memberlist"><span>Bruger liste</span></a></li>
                    <li><a href="#" class="secondlevel"><span class="secondlevel">Racer ►</span></a>
                      <ul>
                        <li><a href="/g21-alba"><span>Alba</span></a></li>
                        <li><a href="/g6-aspara"><span>Aspara</span></a></li>
                        <li><a href="/g14-blandede-racer"><span>Blandede racer</span></a></li>
                        <li><a href="/g19-djaevle"><span>Djævle</span></a></li>
                        <li><a href="/g4-dvaerge"><span>Dværge</span></a></li>
                        <li><a href="/g13-daemoner"><span>Dæmoner</span></a></li>
                        <li><a href="/g10-elver"><span>Elver</span></a></li>
                        <li><a href="/g9-engle"><span>Engle</span></a></li>
                        <li><a href="/g12-mennesker"><span>Mennesker</span></a></li>
                        <li><a href="/g11-navajo"><span>Navajo</span></a></li>
                        <li><a href="/g8-spgelser"><span>Spøgelser</span></a></li>
                        <li><a href="/g3-vampyrer"><span>Vampyrer</span></a></li>
                      </ul>
                      <li><a href="/search?search_id=newposts"><span>Nyeste indlæg</span></a>
                    </li>
                  </ul>
                </li>
                <li id="button_help"><a class="firstlevel" href="/faq"><span class="firstlevel">Help</span></a></li>
                <li id="button_search"><a class="firstlevel" href="/search"><span class="firstlevel">Search</span></a></li>
                <li id="button_calendar"><a class="firstlevel" href="/calendar"><span class="firstlevel">Calendar</span></a></li>

Try adding to the bottom of your CSS:

Code:

#topnav li:hover ul li:hover ul {
    left: auto;
    right: -100%;
    top: 0;
}

Solved !!! Works perfectly!