Webboard

wersja skryptu MyBB:1.6.14
adres forum:http://fppolska.cba.pl
na czym polega problem :

Witam męczę sie z menu już drugi tydzień wiem jak je zrobić ale pojawia się pewien problem
gdy chce zrobić menu rozwijane profillowe

Posiadam silnik mybb i dodałem menu głównych zakładek lecz gdy dodam drugie to łączą się dwa menu i powstaje coś dziwnego.

chodzi mi

Kod menu pierwszego:
HTML:

Kod:
                <ul>

                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" /><font color="white">Szukaj</font></a></li>

                    <li><a href="nowy.html"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" /><font color="white">Wiki</font></a></li>

                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" /><font color="white">Kalendarz</font></a></li>

                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" /><font color="white">Pomoc</font></a></li>

                </ul>

CSS:

Kod:
ul, ul li {

    display: block;

    list-style: none;

    margin: 0;

    padding: 0;

}

ul {

    float: right;

}

ul li {

    float: right;

}

ul a:link, ul a:visited {

    text-decoration: none;

    display: block;

    font-weight: bold;

    background: #000 url(tlo.gif) repeat-x center;

    color: #fff;

    padding: 10px 20px;

    border-right: 1px solid #fff;

    border-right: 1px solid #fff;

}

ul a:hover {

    background-color: #800;

    background-image: url(tlo2.gif);

}

Może ktoś wie jak zrobić żeby były dwa inne i sie ze sobą nie łączyły lub jak dać odpowiednio identyfikatory, albo jeżeli ktoś ma naprawde dobry poradnik to po proszę.

A i jak dać identyfikator w <ul>?

Z góry dziękuje za pomoc

Nadać UL ID?

Kod:
<ul id="nazwa">

potem w CSS #nazwa { /* kod */ }.

Czyli tutaj tak?

Kod:
ul, ul li {

    display: block;

    list-style: none;

    margin: 0;

    padding: 0;

}

#nazwa {

    float: right;

}

#nazwa li {

    float: right;

}

#nazwa a:link, ul a:visited {

    text-decoration: none;

    display: block;

    font-weight: bold;

    background: #000 url(tlo.gif) repeat-x center;

    color: #fff;

    padding: 10px 20px;

    border-right: 1px solid #fff;

    border-right: 1px solid #fff;

}

#nazwa a:hover {

    background-color: #800;

    background-image: url(tlo2.gif);

}

Rozwiązany, teraz mam inny problem.
////
Forum:http://fppolska.cba.pl
Co zrobić żeby takie menu otwierało się gdy klikne myszką?

HTML:

Cytat:<div id="kontener">

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="http://kortas.info">Portfolio</a>
<ul>
<li><a href="#">Strony www</a></li>
</ul>
</li>
<li><a href="http://webroad.pl">WEBroad.pl</a></li>
<li><a href="#">Informacje</a>
<ul>
<li><a href="#">O mnie</a></li>
<li><a href="#">Aktualności</a></li>
</ul>
</li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Kontakt</a>
<ul>
<li><a href="#">Formularz kontaktowy</a></li>
<li><a href="#">Pomoc</a></li>
</ul>
</li>
<li><a href="#">Współpraca</a>
<ul>
<li><a href="#">Wymiana linkiem</a></li>
</ul>
</li>
</ul>

</div>

CSS:

Kod:
#kontener {width: 960px; margin: 0 auto;}

#menu {display: table; padding: 0 10px 0; margin: 0 auto; overflow: hidden; font-size: 14px; background: #242424;}

#menu li {list-style-type: none; margin: 0 auto; float: left; }

#menu li:hover {background: #404040;}

#menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;}

#menu li a:hover {background: #404040; color: white;}

#menu li li a {width: 160px;}

#menu li ul {overflow: hidden; display: none; background: #242424;}

#menu li:hover ul {position: absolute; padding: 0; display: block; width: 160px;}

/*ANIMACJA - tylko CSS3*/

#menu *:hover {transition: 0.3s ease-in;}

/*ZAOKRĄGLONE ROGI - tylko CSS3*/

#menu {border-radius: 3px;}

#menu li ul {border-radius: 0 0 3px 3px;}

Crashey

Snake_

Crashey