Drop down menu pe versiunea phpbb3

Salutare prieteni,

Astazi am sa va arat cum puteti adauga un meniu drop down pe versiunea phpbb3.

Demonstratie:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

HTML + Jquery
Adaugati urmatorul cod in panou de administrare » Module » Gestiunea codurilor javascript » Creati un nou javascript

Cod:

jQuery(document).ready(function() {
jQuery('ul.navlinks').after(' <ul id="nav" class="dropdown">
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>


      <li><a href="/#" class="dir">Link</a>
      <ul>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>

      </ul>
   </li>
      <li><a href="#" class="dir">Link</a>
      <ul>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>

         <li><a href="#">Link</a></li>
      </ul>
   </li>

</ul>  ');
});

CSS
Adaugati urmatorul cod in panou de administrare » Afisare » Culori » Foaia de stil css

Cod:

/*DROP DOWN MENU - EXTREM-TUTORIALS*/
ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

   ul.dropdown {
font-size: 11px;
padding-top: 4px;
font-weight: bold;
}


ul.dropdown ul {
margin-left: -6px;
box-shadow: 0px 0px 5px #ccc;
width: 170px;
padding-bottom: 9px;
border: 1px solid #d7d7d7;
border-radius: 5px;
background: #fff;
color: #000;
font-size: 11px;
font-weight: normal;
   }

ul.dropdown li a { 
 display: block;
 padding: 8px 6px;
}

ul.dropdown li {
 padding: 0;
}

ul.dropdown li.dir {
 padding: 7px 20px 7px 12px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}

ul.dropdown ul {padding-top: 5px;padding-bottom: 5px;}

ul.dropdown ul a {
 padding: 4px 5px 4px 12px;
 /*width: 139px;*/
}
ul.dropdown ul a:hover {
border-radius: 5px;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #d7d7d7;
border-radius: 0px;
background: #eee;
font-weight: bold;
}
ul.dropdown ul a {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
ul.dropdown ul a.dir {
 /*width: 129px;*/
}