Jak mogę zrobić taką zakładkę gdy na nią kliknę rozsuwają się w dół np 2 inne?

wersja skryptu MyBB:1.6.14
adres forum:brak
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki):

Jak mogę zrobić taką zakładkę gdy na nią klikne rozsuwają się w dół np 2 inne?

Snake_ napisał 05.07.2014, 08:45:
Poprawiam tytuł, przenoszę

Coś takiego? http://dev7studios.com/dropit/#

Nie,wklejam kod i się robią obok
a ja chce własnie o tak [u góry]
http://evogame.com.pl/

No to jest to, co napisałem, wystarczy dobrze tego użyć.

http://grafifor.pl/Temat-html5-css3-js-r...pdown-menu

sorki ale nie ogarniam,byś mi mógł teraz takiego małego tuta zrobić?

To jest tutorial.

DO CSS:

.float-right{float:right;}

/* CSS3 menu */
.css3-menu{
    background: #323232;
    margin: 0 0 0 -4px;
}
.css3-menu>ul{
    line-height: 40px;
    padding: 0 0 0 4px;
}
.css3-menu>ul>li{
    list-style: none;
    display: inline;
    margin: 0 0 0 -4px;
    position: relative;
}
.css3-menu>ul>li>a>i{
    font-size: 14px;
}
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
    display: inline-block;
    padding: 5px 18px;
    height: 40px;
    color: #EFEFEF;
    text-decoration: none;
}
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    background: #b71ae4;
    color: #fff;
}
.dropdown{
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    background: #444;
    font-size: 14px;
}
.dropdown>li{
    display: block;
    list-style: none;
}
.dropdown>li>a:link, .dropdown>li>a:visited{
    display: block;
    color: #EFEFEF;
    width: 140px;
    text-decoration: none;
    padding: 3px 15px;
    border-bottom: dashed 1px #676767;
}
.dropdown>li>a:hover, .dropdown>li>a:active{
    background: #b71ae4;
    color: #fff;
    border-bottom: solid 1px #b71ae4;
}
.css3-menu>ul>li.resp-menu{display: none !important;}

/* Media Queries */
@media only screen and (min-width : 580px) and (max-width : 800px){
    /* CSS3 menu */
    .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        padding: 0 12px;
    }
    .dropdown{
        top: 30px;
        font-size: 13px;
    }
    .dropdown>li>a:link, .dropdown>li>a:visited{
        padding: 0 10px;
    }
}
@media only screen and (min-width : 1px) and (max-width : 579px){
    /* CSS3 menu */
    .css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        padding: 0 12px;
    }
    .dropdown{
        top: 28px;
        font-size: 12px;
    }
    .dropdown>li>a:link, .dropdown>li>a:visited{
        width: 100px;
        padding: 0px 10px;
        line-height: 25px;
    }
    .css3-menu>ul>li.menu-li{display: none;}
    .css3-menu>ul>li.resp-menu{display: inline !important;}
} 


do headerinclude:

<script type="text/javascript">
    $(document).ready(function () {
        $(".hoverli").hover(
      function () {
         $('.dropdown').fadeIn('medium');
      },
      function () {
         $('.dropdown').fadeOut('medium');
      }
    );

    });
    </script>

(+ zakładam, że masz bibliotekę jQuery).

i w miejsce, gdzie ma się wyświetlać.

<nav class="css3-menu"><ul>
            <li class="menu-li"><a href="#home" class="active"><i class="fa fa-home"></i></a></li>
            <li class="hoverli menu-li"><a href="#projekty"><i class="fa fa-briefcase"></i> Projekty <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown">
                    <li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
                    <li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
                    <li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
                </ul>
            </li>
            <li class="menu-li"><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
            <li class="menu-li"><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
            <li class="menu-li"><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
            <li class="menu-li"><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
            <li class="float-right"><a href="#right"><i class="fa fa-user"></i> Right</a></li>
            <li class="hoverli resp-menu"><a href="#resp-menu"><i class="fa fa-bars"></i> Menu <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown">
                    <li><a href="#home" class="active"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
                    <li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
                    <li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
                    <li><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
                    <li><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
                    <li><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
                    <li><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
                </ul>
            </li>
        </ul></nav>

Dodatkowo zostały użyte ikony font-awesome, więc to też: https://webboard.pl/wiki.php?najatwiejsz...stylu.html