Proste wysuwane menu

Mam taką nawigacje http://screenshot.sh/m7yrzDttlgxjE
I jak zrobić taki efekt że jak kliknę na kopertę to wysunie się menu z wyborem np napisz wiadomość itp

Coś na zasadzie jak tutaj klikne w swoj nick w gornym menu i wyskakuje profil panel uzytkownika etc, tylko Ja chcę w 2 kolumnach

Kod na wyświetlenie koperty z linkiem

<li><a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>

Łukasz napisał 16.01.2017, 10:59:
Ostatni raz upominam. Wszelkie zrzuty z ekranu należy dodawać w postaci załącznika. Zabronione jest zamieszczanie grafik / plików umieszczonych na serwerach zewnętrznych.

Tu masz przykład, wystarczy, że go sobie przerobisz.

<a href="" id="ddnmenu">{$mybb->user['username']} <i class="fa fa-caret-down"></i></a>
 <div id="ddnmenu_popup" class="popup_menu" style="display: none;">
 <div class="popup_item_container">
 <a href="{$mybb->settings['bburl']}/usercp.php" class="popup_item clr_gry">Panel użytkownika
 <i class="fa fa-user menuadj"></i></a>
 </div>
 <div class="popup_item_container">
 <a class="popup_item clr_gry" href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}
 <i class="fa fa-users menuadj"></i></a>
 </div>
 <div class="popup_item_container">
 <a href="{$mybb->settings['bburl']}/usercp.php?action=profile" class="popup_item clr_gry">Edytuj profil
 <i class="fa fa-pencil menuadj"></i></a>
 </div>
 <div class="popup_item_container">
 <a href="{$mybb->settings['bburl']}/usercp.php?action=options" class="popup_item clr_gry">Edytuj opcje
 <i class="fa fa-cogs menuadj"></i></a>
 </div>
 <div class="popup_item_container">
 <a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="popup_item clr_gry">Edytuj awatar
 <i class="fa fa-picture-o menuadj"></i></a>
 </div>
 <div class="popup_item_container">
 <a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="popup_item clr_gry" style="padding-bottom: 4px;">Edytuj sygnaturę
 <i class="fa fa-paint-brush menuadj"></i></a>
 </div>
 <div class="popup_item_container" style="border-top: 1px solid rgba(0, 0, 0, .023);">
 <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="popup_item clr_gry">{$lang->welcome_logout} się
 <i class="fa fa-power-off menuadj"></i>
 </a>
 </div> 
 </div>
 <script type="text/javascript">
 // <!--
 if(use_xmlhttprequest == "1")
 {
 $("#ddnmenu").popupMenu();
 }
 // -->
 </script> 


Arkusze kaskadowe:

.popup_menu {
    margin-top: 14px;
    z-index: 4;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, .05);
    padding: 1px;
    background: rgb(255, 255, 255); }

.popup_menu:before {
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  width: 0; height: 0;
  content: "";
  display: block;
  left: 1.4em;
  bottom: 100%;
  position: absolute; }

.popup_menu .popup_item { color: #444; }
.popup_menu .popup_item:hover {
    background: none;
    color: #34a0ef !important; } 


Jak chcesz wykorzystać Font Awesome (czyli małe obrazki, np: " <i class="fa fa-user menuadj"></i>" daje małą ikonkę postaci), to do headerinclude wrzucasz:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> 


@Sepowaty Rozlatuje Mi się lekko, możesz podstawić?

Cały header_welcomeblock_member

    <span class="welcome">
      <ul class="menu panel_links">
            <li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp">{$lang->welcome_usercp}</a></li>
            {$modcplink}
            {$admincplink}
            <li><a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>

      <span class="float_right"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout" title="wyloguj"><i class="fa fa-power-off" aria-hidden="true"></i></a></span></span>        </ul>
    </div>
</div>

Linie odpowiadającą za Fa Fa mam już dopisaną

Poradziłem sobie. Wykorzystałem JS

<script type="text/javascript">
// <!--
    if(use_xmlhttprequest == "1")
    {
        $("#extraslink").popupMenu();
    }
// -->
</script>