Menu Rozwija Pionowe |CSS/HTML|

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:

                <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:

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?

<ul id="nazwa">

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

Czyli tutaj tak?

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:

<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:

#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;}

Snake_ napisał 19.08.2014, 18:53:
A więc: 1 wątek - 1 problem.


Rozwiązane wątki oznaczaj jako "rozwiązane", byśmy o tym wiedzieli.