Help Hỏi về rê chuột vào Menu lập tức hiện menu con

[Cu tí siêu nhân]

Mình thấy bên bác mamcongnghe.com có kiểu rê chuột vào menu là hiện liền menu con, khác với các style khác là phải rê chuột vào đúng hình tam giác chỉ xuống mới hiện,
mình muốn sửa lại kiểu giống nhưng bác mamcongnghe ấy thì có cách nào ko? nhờ bạn nào biết chỉ giúp m với
cám ơn bạn!

 

[Cu tí siêu nhân]

up .

 

[Cu tí siêu nhân]

up, nhờ bạn nào biết giúp hộ

 

[dcstylexf]

cái này là mod lại template navigation bạn à. Template của mình đây, cơ mà phải sửa lại cho hợp với site bạn đấy nhé

Navigation

<xen:require css="navigation.css" />

<div id="navigation" class="stickyTop">
    <div class="uix_navigationWrapper">
   
        <div class="pageContent noBorderRadius">
            <nav>
                <div class="navTabs">
                   
                    <div class="pageWidth">
                   
                       
                        <ul class="publicTabs left">
           
                       
                        <li id="logo_small">
                            <a href="https://mamcongnghe.com">
                           
                                <img src="https://mamcongnghe.com/styles/MCN/xenforo/logo.png">
                           
                            </a>
                        </li>
                       
        <!-- home -->
       
            <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
       
       
       
        <!-- extra tabs: home -->
        <xen:if is="{$extraTabs.home}">
        <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
           
                <a href="{$extraTab.href}"  class="navLink accountPopup NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <div class="tabMenu {$extraTabId}TabLinks">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
       
                           
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'Popup PopupControl PopupClosed slee', 'Popup PopupControl PopupClosed'}">
                <a href="{$tabs.forums.href}" class="navLink accountPopup NoPopupGadget" rel="Menu">{$tabs.forums.title}</a>
                <div class="tabMenu">
                    <span class="arf"></span>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}">
                            <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                            <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                        </xen:if>
                        <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>
       
                <!-- extra tabs: middle -->
       
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'Popup PopupControl PopupClosed slee', 'Popup PopupControl PopupClosed'}">
               
                <a href="{$extraTab.href}"  class="navLink accountPopup NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <div class="tabMenu {$extraTabId}TabLinks">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>               
       
        <!-- extra tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'Popup PopupControl PopupClosed slee', 'Popup PopupControl PopupClosed'}">
                <a href="{$extraTab.href}"  class="navLink accountPopup NoPopupGadget" rel="Menu">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <div class="tabMenu {$extraTabId}TabLinks">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
       
                <!-- responsive popup -->
       
       
        <li class="navTab navigationHiddenTabs Popup PopupControl PopupClosed" style="display:block!important">                           
       
        <a href="#" class="navLink slideout-menu-toggle"><i class="fa fa-bars"></i> Menu</a>
       
        </li>
       
        </ul>
                       
                       
                       



    <ul class="visitorTabs right">
   
    <xen:if is="{$visitor.user_id}">
    <xen:include template="navigation_visitor_tab" />
    <xen:else/>
    <li class="navTab login PopupClosed hide">
        <span class="navLink">
         <a href="{xen:link login}" class="OverlayTrigger navLink loginText"><i class="fa fa-user-plus" style="margin-right: 5px;"></i> Login/Sign Up</strong>
        </span>
    </li>
    </xen:if>       
    </ul>
   

                       
                       
                    </div>

                </div>

            <span class="helper"></span>
               
            </nav>
        </div>
   
    </div>
</div>

<div class="slideout-menu">
    <h3>MamCongNghe Dictionary  <a href="#" class="slideout-menu-toggle"><i class="fa fa-times"></i></a></h3>
   
    <ul>
   
            <!-- home -->
       
            <li class="navTab"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>

        <!-- extra tabs: home -->
        <xen:if is="{$extraTabs.home}">
        <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                <li class="navTab">
           
                <a href="{$extraTab.href}">{$extraTab.title} <xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
               
            </li>
            <div class="Extra">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
        </div>
        </xen:foreach>
        </xen:if>
       
                           
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab">
                <a href="{$tabs.forums.href}">{$tabs.forums.title}</a>
               
            </li>
        </xen:if>
        <div class="Extra">
                    <span class="arf"></span>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}">
                            <li><a href="{xen:link 'watched/forums'}">{xen:phrase watched_forums}</a></li>
                            <li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>
                        </xen:if>
                        <li><a href="{xen:link 'find-new/posts'}" rel="nofollow">{xen:if $visitor.user_id, {xen:phrase new_posts}, {xen:phrase recent_posts}}</a></li>
                    </xen:hook>
                    </ul>
                </div>
       
                <!-- extra tabs: middle -->
       
        <xen:if is="{$extraTabs.middle}">
        <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
           
                <li class="navTab">
               
                <a href="{$extraTab.href}">{$extraTab.title} <xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
               
            </li>
           
        <div class="Extra">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
                </div>
        </xen:foreach>
        </xen:if>       
       
        <!-- extra tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
           
                <li>
                <a href="{$extraTab.href}" >{$extraTab.title} <xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
               
            </li>
           
            <div class="Extra">
                    <span class="arf"></span>
                    {xen:raw $extraTab.linksTemplate}
                </div>
        </xen:foreach>
        </xen:if>
    </ul>
</div>

Navigation.css

.navTabs .navTab.login .navLink {cursor: pointer;display:block;text-transform:uppercase;font-size:12px;color:#fff}
.navTabs .navTab.login .navLink .ion-person {font-size: 16px;margin-right: 10px;}
.navTabs .navTab.login .loginBox {position:absolute;opacity: 0; visibility: hidden;top: 120%;right: 0;z-index:99999;transition: all .3s;-webkit-transition: all .3s;-moz-transition: all .3s}
.navTabs .navTab.login:hover .loginBox {opacity: 1;visibility: visible;top: 100%}

body { padding-top: 60px;background: #B3B3B3 }
    #logo_small
    {
        float: left;
        display: none;
    }
    .activeSmallLogo #logo_small
    {
        display: block;
    }
   
   
        #logo_small
        {
            display: block;
        }
   
   
    #logo_small a
    {
        display: block;
        height: 60px;
        line-height: 60px;
        transform-style: preserve-3d;
    }
    .activeSticky #logo_small a
    {
        height: 20px;
        line-height: 20px;
    }
    #logo_small a:hover
    {
        color: rgb(0, 0, 0);
    }
    #logo_small img
    {
        width: 145px;
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: 50%;
        -webkit-transform:  translateY(-50%); -moz-transform:  translateY(-50%); -o-transform:  translateY(-50%); -ms-transform:  translateY(-50%);transform: translateY(-50%);
    }

#navigation .pageWidth { max-width:1250px; }
#navigation .navTabs .account .navLink img {
    border-radius: 100%;
    border: 2px solid #4B4B4B;
    vertical-align: middle;
    margin: 0 10px;

}
#navigation {-webkit-box-shadow: 1.5px 2.598px 5px 0px rgba( 0, 0, 0, 0.2 ); -moz-box-shadow: 1.5px 2.598px 5px 0px rgba( 0, 0, 0, 0.2 ); -khtml-box-shadow: 1.5px 2.598px 5px 0px rgba( 0, 0, 0, 0.2 ); box-shadow: 1.5px 2.598px 5px 0px rgba( 0, 0, 0, 0.2 );}
.tabMenu {border:none;}
.tabMenu .blockLinksList li {border-left: 4px solid transparent!important;padding: 5px 15px;border:1px solid #ebebeb;border-top:none;transition: .2s al;-webkit-transition: .2s all;-moz-transition: .2s all}
.tabMenu .blockLinksList li:last-child {border-bottom:none}
.tabMenu .blockLinksList li a {font-weight:bold;color:#2b373a;}
.tabMenu .blockLinksList li a:active {background:none;}
.tabMenu .blockLinksList li:hover {border-left:4px solid #03a9f4!important;background:#f9f9f9}
.tabMenu .blockLinksList li:hover a {color:#00bfa5}
.tabMenu .blockLinksList {padding:0}
.navTabs .visitorTabs .navLink {padding: 0 10px}
.navTabs .visitorTabs .navLink [class*="ion"] {font-size: 24px;color:#fff}

.navTabs .navTab.PopupClosed .navLink {
    color: rgba(255, 255, 255, 0.5);
}

.navTabs .navTab.account .avatar img
{
    width: 20px;
    height: 20px;
    border: none;
    -webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; box-shadow: none;
    display: block;
}
   
.navTabs .navTab.account .navLink .accountUsername
{
    display: inline-block;
    vertical-align: inherit;
    text-transform: none;
    margin-left:10px;
}
.navTabs .navTab.account .navLink
{
    transform-style: preserve-3d;
}
.navTabs .navTab.account .navLink > strong,
.navTabs .navTab.account .navLink > span {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    position: relative;
    top: 50%;
    -webkit-transform:  translateY(-50%); -moz-transform:  translateY(-50%); -o-transform:  translateY(-50%); -ms-transform:  translateY(-50%);transform: translateY(-50%);
}


#navigation .navTabs .navLink:hover {color:#fff}
.stickyTop {
    width: 100%;
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform:  translate3d(0, 0, 0); -moz-transform:  translate3d(0, 0, 0); -o-transform:  translate3d(0, 0, 0); -ms-transform:  translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
    height: 60px;
    }
.tabMenu {
    min-width: 100px;
    z-index: 99;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 130%;
    padding-top: 10px;
    visibility: hidden;
    -webkit-transition: all.3s;
    -moz-transition: all.3s;
    -o-transition: all.3s;
    -webkit-transform: scale(0.8) translateX(-50%);
    -o-transform: scale(0.8) translateX(-50%);
    -moz-transform: scale(0.8)  translateX(-50%);
    -webkit-transform:  scale(0.8) translateX(-50%); -moz-transform:  scale(0.8) translateX(-50%); -o-transform:  scale(0.8) translateX(-50%); -ms-transform:  scale(0.8) translateX(-50%);transform: scale(0.8) translateX(-50%);
}
.navTabs .navTab:hover .tabMenu {
    opacity: 1;
    top: calc(100% - 10px);
    -webkit-transform: scale(1) translateX(-50%);
    -o-transform: scale(1) translateX(-50%);
    -moz-transform: scale(1)  translateX(-50%);
    -webkit-transform:  scale(1) translateX(-50%); -moz-transform:  scale(1) translateX(-50%); -o-transform:  scale(1) translateX(-50%); -ms-transform:  scale(1) translateX(-50%);transform: scale(1) translateX(-50%);
    visibility: visible;
}


.navTabs .navLink .itemCount.Zero
{
    display: none !important;
}
.Menu.uix_megaMenu
{
    max-width: 1190px;
    width: 100%;
    left: 0 !important;
    right: 0;
    margin: 0 auto;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
   
}

#headerMover #header
{
    position: static;
}
#headerMover #headerProxy
{
    display: none;
    height: 0;
}
.navTabs .navTab.PopupClosed .navLink
{
    color: rgba(255, 255, 255, 0.5);
}

.hasTabLinks #navigation .navTabs .navTab.selected .navLink
{
    border-bottom-color: ;
    -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box;
}


   


.navTabs .navTab.PopupClosed .navLink:hover
{
    color: rgb(0, 0, 0);
}

.navTabs .moderatorTabs
{
    float: left;
}
.navTabs .moderatorTabs .uix_icon
{
    opacity: 0.5;   
}

.navTabs .navTab.selected .tabLinks
{
    top: 60px;
    border: 1px solid #f0f0f2;
border-top-width: 0;
border-radius: ;
-webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; -khtml-border-top-left-radius: 0; border-top-left-radius: 0;
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; -khtml-border-top-right-radius: 0; border-top-right-radius: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
background-clip: content-box;

}

.navTab.navigationHiddenTabs .navLink
{
    transform-style: preserve-3d;
}
#navigation .uix_icon-navTrigger
{
    font-size: 14px;
}



.navTabs .publicTabs .navLink
{
    padding-right: 15px;
padding-left: 15px;
}






    .navTabs .publicTabs .navTab.selected.Popup .SplitCtrl
    {
        display: none;
    }



    .navTabs .publicTabs .navTab .SplitCtrl
    {
        display: none;
    }


.navTabs .SplitCtrl:hover
{
    text-decoration: none;
}
.navTabs .SplitCtrl,
.navTabs .navTab.PopupClosed .SplitCtrl
{
    padding-left: 0;
    padding-right: 0;
    margin-left: -21px;
    width: 21px;
    text-align: left;
    border: 0;
    position: relative;
}

.navTabs .navTab.PopupClosed:hover .SplitCtrl
{
    background-image: none;
}
.navTabs .SplitCtrl:before
{   
    content: "\f104";
    display: inline-block;
        font-family: "Ionicons";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    font-size:11px;
    color: rgba(255, 255, 255, 0.5);
}
.navTabs .navTab.selected .SplitCtrl:before {color: ;}

.navTabs .navTab.PopupClosed:hover .SplitCtrl:before
{
    display: block;
}
.Popup.PopupControl.PopupOpen .SplitCtrl:before,
.Popup.PopupContainerControl.PopupOpen .SplitCtrl:before,
.navTabs .navTab.selected.PopupOpen .SplitCtrl:before
{
    color: ;
}


    .navTabs .SplitCtrl, .navTabs .SplitCtrl:before
    {
        display: none;
    }





    .navTabs .navTab.selected .SplitCtrl {display: block;}
    .navTabs .navTab.selected .navLink {position: static;}
   
    #navigation .pageContent {height: 60px;}


.navTabs .navTab.selected .tabLinks li
{
    padding-top: 0;
}


    #navigation .navTabs .navLink
    {
        transform-style: preserve-3d;
    }
    #navigation .navTabs .navLink .itemCount
    {
        margin-left: 6px;
display: inline-block;
vertical-align: top;
position: absolute;
top: 30%;
transform: translateY(-50%);
    }
    #navigation .navTabs .navLink .itemCount .arrow
    {
        display: none;
    }
   
#navigation {background-color: #1976d2;}
#navigation .pageContent
{
    position: relative;
    padding: 0 15px;
}

#navigation .menuIcon
{
    position: relative;
    font-size:18px;
    width: 16px;
    display: inline-block;
    text-indent: -9999px;
}

#navigation .PopupOpen .menuIcon:before,
#navigation .navLink .menuIcon:before
{
    zoom: 1;
}

#navigation .menuIcon:before
{
    content: "";
    font-size: 18px;
    position: absolute;
    top: 1.4em;
    left: 0;
    width: 16px;
    height: 2px;
    border-top: 6px double currentColor;
    border-bottom: 2px solid currentColor;
}

    .navTabs
    {
        font-size: 13px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
background-clip: content-box;

        height: 60px;
    }
   
        .navTabs .publicTabs
        {
            float: left;
        }
       
        .navTabs .visitorTabs
        {
            float: right;
        }
       
        .navTabs .visitorTabs .navTab {
    line-height: 60px;
    padding: 0 10px; }
       
        .navTabs .visitorTabs .navTab .fa {
                font-size: 24px;
                color: #FFF;
        }
   
            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;
                position: relative;
               
            }


/* ---------------------------------------- */
/* Links Inside Tabs */

.navTabs .navLink,
.navTabs .SplitCtrl
{
    font-weight: bold;
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
padding-right: 15px;
padding-left: 15px;
display: block;
float: left;
vertical-align: text-bottom;
text-align: center;
outline: 0 none;
text-transform: uppercase;

   
   
   
    height: 60px;
    line-height: 60px;
}

    .navTabs .publicTabs .navLink
    {
        padding: 0 15px;
    }
   
    .navTabs .visitorTabs .navLink
    {
        padding: 0 10px;
    }
   
    .navTabs .navLink:hover
    {
        text-decoration: none;
    }
   
    /* ---------------------------------------- */
    /* unselected tab, popup closed */

    .navTabs .navTab.PopupClosed
    {
        position: relative;
    }
.navTabs .Popup .PopupControl:hover,.navTabs .Popup.PopupContainerControl:hover    {background:none}
    .navTabs .navTab.PopupClosed .navLink
    {
        color: #f4f5f5;
    }
   

            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: #FFFFFF;
            }
       
    .navTabs .navTab.PopupClosed .arrowWidget
    {
        /* circle-arrow-down-light */
        background-position: -64px 0;
    }
   
    .navTabs .navTab.PopupClosed .SplitCtrl
    {
        margin-left: -14px;
        width: 14px;
    }
       
        .navTabs .navTab.PopupClosed:hover .SplitCtrl
        {
            /* nav_menu_gadget, height: 17px */
            background: transparent url('styles/samsung-4.0/xenforo/xenforo-ui-sprite.png') no-repeat -128px 22.5px;
        }
   
    /* ---------------------------------------- */
    /* selected tab */

    .navTabs .navTab.selected .navLink
    {
        position: relative;
        color: #fff!important;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

    }
   
    .navTabs .navTab.selected .SplitCtrl
    {
        display: none;
    }
   
    .navTabs .navTab.selected .arrowWidget
    {
        /* circle-arrow-down */
        background-position: -32px 0;
    }
   
        .navTabs .navTab.selected.PopupOpen .arrowWidget
        {
            /* circle-arrow-up */
            background-position: -16px 0;
        }
   
    /* ---------------------------------------- */
    /* unselected tab, popup open */
   
    .navTabs .navTab.PopupOpen .navLink
    {
    }
   
   
    /* ---------------------------------------- */
    /* selected tab, popup open (account) */
   
    .navTabs .navTab.selected.PopupOpen .navLink
    {
        background-repeat: repeat-x;
background-position: top;
-webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; -khtml-border-top-left-radius: 0; border-top-left-radius: 0;
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; -khtml-border-top-right-radius: 0; border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -khtml-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -khtml-border-bottom-left-radius: 0; border-bottom-left-radius: 0;

    }
   
/* ---------------------------------------- */
/* Second Row */

.navTabs .navTab.selected .tabLinks
{
   
   
    width: 100%;   
    padding: 0;
    border: none;
    overflow: hidden; zoom: 1;   
    position: absolute;
    left: 0px;   
    top: 62px;
    height: 60px;
    background-position: 0px -60px;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}

    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
        margin-left: 8px;
    }

    .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 275px;
    }

    .navTabs .navTab.selected .tabLinks .menuHeader
    {
        display: none;
    }
   
    .navTabs .navTab.selected .tabLinks li
    {
        float: left;
        padding: 2px 0;
    }
   
        .navTabs .navTab.selected .tabLinks a
        {
            font-weight: bold;
font-size: 12px;
color: #aaa;
padding-right: 10px;
padding-left: 10px;
border-style: none;
display: block;

           
            line-height: 54px;
        }
       
        .navTabs .navTab.selected .tabLinks .PopupOpen a
        {
            color: inherit;
            text-shadow: none;
        }
       
            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                color: rgb(41, 122, 160);
text-decoration: none;
background-color: transparent;
outline: 0;

            }
           
            .navTabs .navTab.selected .tabLinks .Popup a:hover,
            .navTabs .navTab.selected .tabLinks .Popup a:focus
            {
                color: inherit;
                background: none;
                border-color: transparent;
                -webkit-border-radius: 0; -moz-border-radius: 0; -khtml-border-radius: 0; border-radius: 0;
                text-shadow: none;
            }
   
/* ---------------------------------------- */
/* Alert Balloons */
   
.navTabs .navLink .itemCount
{
    font-weight: bold;
font-size: 9px;
color: white;
background-color: rgb(58, 166, 153);
padding: 0 2px;
-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px;
position: absolute;
right: 2px;
top: -12px;
line-height: 16px;
min-width: 16px;
_width: 16px;
text-align: center;
text-shadow: none;
white-space: nowrap;
word-wrap: normal;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
height: 16px;

}

    .navTabs .navLink .itemCount .arrow
    {
        border: 3px solid transparent;
border-top-color: rgb(58, 166, 153);
border-bottom: 1px none black;
position: absolute;
bottom: -3px;
right: 4px;
line-height: 0px;
text-shadow: none;
_display: none;
/* Hide from IE6 */
width: 0px;
height: 0px;

    }
   
.navTabs .navLink .itemCount.Zero
{
    display: block!important;
    background-color: rgb(234, 60, 60);
}

.navTabs .navLink .itemCount.ResponsiveOnly
{
    display: none !important;
}

.NoResponsive #VisitorExtraMenu_Counter,
.NoResponsive #VisitorExtraMenu_ConversationsCounter,
.NoResponsive #VisitorExtraMenu_AlertsCounter
{
    display: none !important;
}
   
/* ---------------------------------------- */
/* Account Popup Menu */

.navTabs .navTab.account .navLink
{
    font-weight: bold;
}

    .navTabs .navTab.account .navLink .accountUsername
    {
        display: block;
        margin-right:10px;
        color: #fff;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#AccountMenu
{
    width: 274px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

    #AccountMenu .menuHeader .avatar
    {
        float: left;
        margin-right: 10px;
    }

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: #aaa;
    }
   
    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: 116px;
    }

    #AccountMenu .menuHeader .links .fr
    {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
   
#AccountMenu .menuColumns
{
    overflow: hidden; zoom: 1;
    padding: 2px;
}

    #AccountMenu .menuColumns ul
    {
        float: left;
        padding: 0;
        max-height: none;
        overflow: hidden;
    }

        #AccountMenu .menuColumns a,
        #AccountMenu .menuColumns label
        {
            width: 115px;
        }

#AccountMenu .statusPoster textarea
{
    width: 245px;
    margin: 0;
    resize: vertical;
    overflow: hidden;
}

#AccountMenu .statusPoster .submitUnit
{
    margin-top: 5px;
    text-align: right;
}

    #AccountMenu .statusPoster .submitUnit .statusEditorCounter
    {
        float: left;
        line-height: 23px;
        height: 23px;
    }
   
/* ---------------------------------------- */
/* Inbox, Alerts Popups */

.navPopup
{
    width: 260px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
    text-decoration: underline;
}

    .navPopup .menuHeader .InProgress
    {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
    }

.navPopup .listPlaceholder
{
    max-height: 350px;
    overflow: auto;
}

    .navPopup .listPlaceholder ol.secondaryContent
    {
        padding: 0 10px;
    }

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: rgb(204, 241, 252);
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 0;
    border-bottom: 1px solid #f9fbfc;
}

.navPopup .listItem:last-child
{
    border-bottom: none;
}

.navPopup .PopupItemLinkActive:hover
{
    margin: 0 -8px;
    padding: 5px 8px;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
    background-color: #f9fbfc;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

    .navPopup .avatar img
    {
        width: 32px;
        height: 32px;
    }

.navPopup .listItemText
{
    margin-left: 37px;
}

    .navPopup .listItemText .muted
    {
        font-size: 9px;
    }

    .navPopup .unread .listItemText .title,
    .navPopup .listItemText .subject
    {
        font-weight: bold;
    }

.navPopup .sectionFooter .floatLink
{
    float: right;
}



@media (max-width:610px)
{
    .Responsive .navTabs
    {
        padding-left: 10px;
        padding-right: 10px;
    }

    .Responsive .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 50px;
    }
}

@media (max-width:480px)
{
    .Responsive.hasJs .navTabs:not(.showAll) .publicTabs .navTab:not(.selected):not(.navigationHiddenTabs)
    {
        display: none;
    }
}


.navTabs .navTab.login.mobile {display:none!important}

#searchBar
{
    position: relative;
    zoom: 1;
    z-index: 52; /* higher than breadcrumb arrows */
}
#searchBar input.textCtrl {background:#fff url(styles/samsung-4.0/uix/dot-b.png) no-repeat 250px center;width:275px;height:20px;font-size:9px;font-style: italic;-webkit-border-radius:7px; -moz-border-radius:7px; -khtml-border-radius:7px; border-radius:7px;border:none;-webkit-box-shadow: none; -moz-box-shadow: none; -khtml-box-shadow: none; box-shadow:none;text-align: right;padding-right:35px}
#searchBar .icon-search {position:absolute;right:15px;top:1px;background:url(styles/samsung-4.0/images/search-icon.png) no-repeat;width:22px;height:21px;  border: none;cursor:pointer}
    #QuickSearchPlaceholder
    {
        position: absolute;
        right: 20px;
        top: -38px;
        display: none;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
        cursor: pointer;
        font-size: 11px;
        height: 16px;
        width: 16px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
        text-indent: -9999px;
        background: transparent url('styles/samsung-4.0/xenforo/xenforo-ui-sprite.png') no-repeat -144px 0px;
        overflow: hidden;
    }

    #QuickSearch
    {
        display: block;
       
        position: absolute;
        right: 20px;
        top: -18px;
       
        margin: 0;
       
        background-color: ;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
    }
           
        #QuickSearch .secondaryControls
        {
            display: none;
        }
   
        #QuickSearch.active
        {
            -webkit-box-shadow: 5px 5px 25px rgba(0,0,0, 0.5); -moz-box-shadow: 5px 5px 25px rgba(0,0,0, 0.5); -khtml-box-shadow: 5px 5px 25px rgba(0,0,0, 0.5); box-shadow: 5px 5px 25px rgba(0,0,0, 0.5);
            padding-bottom: 5px;
        }
       
    #QuickSearch .submitUnit .button
    {
        min-width: 0;
    }
       
    #QuickSearch input.button.primary
    {
        float: left;
        width: 110px;
    }
   
    #QuickSearch #commonSearches
    {
        float: right;
    }
   
        #QuickSearch #commonSearches .button
        {
            width: 23px;
            padding: 0;
        }
       
            #QuickSearch #commonSearches .arrowWidget
            {
                margin: 0;
                float: left;
                margin-left: 4px;
                margin-top: 4px;
            }
   
    #QuickSearch .moreOptions
    {
        display: block;
        margin: 0 24px 0 110px;
        width: auto;
    }


@media (max-width:610px)
{
    .Responsive #QuickSearchPlaceholder
    {
        display: block;
    }

    .Responsive #QuickSearchPlaceholder.hide
    {
        visibility: hidden;
    }

    .Responsive #QuickSearch
    {
        display: none;
    }

    .Responsive #QuickSearch.show
    {
        display: block;
    }
}

@media (max-width:580px) {
       #navigation .navTabs .navLink { max-width: 70px; }
       #navigation .navTabs .navLink .username { display:none; }
       #logo_small img {
    visibility: hidden;
    width: 0;
       }
       #logo_small:before {
           content: 'M';
           font-size: 24px;
           color: #3AA699;
           line-height: 60px;
           font-weight: 600;
           cursor: pointer;
       }
}

Navigation_visitor_tab

<xen:edithint template="navigation.css" />

    <xen:hook name="navigation_visitor_tabs_start" />

    <!-- account -->
    <li class="navTab account Popup PopupControl PopupClosed {xen:if $tabs.account.selected, 'selected'}">

        <xen:set var="$visitorHiddenUnread" value="{xen:calc '{$visitor.alerts_unread} + {$visitor.conversations_unread}'}" />
        <a href="{xen:link account}" class="navLink accountPopup NoPopupGadget" rel="Menu" style="line-height: 60px;">
        <img src="{xen:helper avatar, $visitor, s, 'true'}" alt="{$visitor.username}" width="24" height="24" />
        <strong class="username">{$visitor.username}</strong>
            <strong class="itemCount ResponsiveOnly {xen:if $visitorHiddenUnread, '', 'Zero'}"
                id="VisitorExtraMenu_Counter">
                <span class="Total">{xen:number $visitorHiddenUnread}</span>
                <span class="arrow"></span>
            </strong>
        </a>
       
        <div class="Menu JsOnly" id="AccountMenu">
            <div class="primaryContent menuHeader">
                <xen:avatar user="$visitor" size="m" class="NoOverlay plainImage" title="{xen:phrase view_your_profile}" />
               
                <h3><a href="{xen:link members, $visitor}" class="concealed" title="{xen:phrase view_your_profile}">{$visitor.username}</a></h3>
               
                <xen:if hascontent="true"><div class="muted"><xen:contentcheck>{xen:helper usertitle, $visitor}</xen:contentcheck></div></xen:if>
               
                <ul class="links">
                    <li class="fl"><a href="{xen:link members, $visitor}">{xen:phrase your_profile_page}</a></li>
                </ul>
            </div>
            <div class="menuColumns secondaryContent">
                <ul class="col1 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links1">
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if>
                    <xen:if is="{$canEditSignature}"><li><a href="{xen:link account/signature}">{xen:phrase signature}</a></li></xen:if>
                    <xen:if is="{$canEditProfile}"><li><a href="{xen:link account/contact-details}">{xen:phrase contact_details}</a></li></xen:if>
                    <li><a href="{xen:link account/privacy}">{xen:phrase privacy}</a></li>
                    <li><a href="{xen:link account/preferences}" class="OverlayTrigger">{xen:phrase preferences}</a></li>
                    <li><a href="{xen:link account/alert-preferences}">{xen:phrase alert_preferences}</a></li>
                    <xen:if is="{$canUploadAvatar}"><li><a href="{xen:link account/avatar}" class="OverlayTrigger" data-cacheOverlay="true">{xen:phrase avatar}</a></li></xen:if>
                    <xen:if is="{$xenOptions.facebookAppId}"><li><a href="{xen:link account/facebook}">{xen:phrase facebook_integration}</a></li></xen:if>
                    <li><a href="{xen:link account/security}">{xen:phrase password}</a></li>
                </xen:hook>
                </ul>
                <ul class="col2 blockLinksList">
                <xen:hook name="navigation_visitor_tab_links2">
                    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
                    <li><a href="{xen:link conversations}">{xen:phrase conversations}
                        <strong class="itemCount {xen:if $visitor.conversations_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_ConversationsCounter">
                            <span class="Total">{xen:number $visitor.conversations_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/alerts}">{xen:phrase alerts}
                        <strong class="itemCount {xen:if $visitor.alerts_unread, '', 'Zero'}"
                            id="VisitorExtraMenu_AlertsCounter">
                            <span class="Total">{xen:number $visitor.alerts_unread}</span>
                        </strong></a></li>
                    <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
                    <li><a href="{xen:link search/member, '', 'user_id={$visitor.user_id}'}">{xen:phrase your_content}</a></li>
                    <li><a href="{xen:link account/following}">{xen:phrase people_you_follow}</a></li>
                    <li><a href="{xen:link account/ignored}">{xen:phrase people_you_ignore}</a></li>
                    <xen:if is="{$xenCache.userUpgradeCount}"><li><a href="{xen:link account/upgrades}">{xen:phrase account_upgrades}</a></li></xen:if>
                </xen:hook>
                </ul>
            </div>
            <div class="menuColumns secondaryContent">
                <ul class="col1 blockLinksList">
                    <li>               
                        <form action="{xen:link account/toggle-visibility}" method="post" class="AutoValidator visibilityForm">
                            <label><input type="checkbox" name="visible" value="1" class="SubmitOnChange" {xen:checked $visitor.visible} />
                                {xen:phrase show_online_status}</label>
                            <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        </form>
                    </li>
                </ul>
                <ul class="col2 blockLinksList">
                    <li><a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">{xen:phrase log_out}</a></li>
                </ul>
            </div>
            <xen:if is="{$canUpdateStatus}">
                <form action="{xen:link members/post, $visitor}" method="post" class="sectionFooter statusPoster AutoValidator" data-optInOut="OptIn">
                    <textarea name="message" class="textCtrl StatusEditor Elastic" placeholder="{xen:phrase update_your_status}..." rows="1" cols="40" style="height:18px" data-statusEditorCounter="#visMenuSEdCount" data-nofocus="true"></textarea>
                    <div class="submitUnit">
                        <span id="visMenuSEdCount" title="{xen:phrase characters_remaining}"></span>
                        <input type="submit" class="button primary MenuCloser" value="{xen:phrase post_verb}" />
                        <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
                        <input type="hidden" name="return" value="1" />
                    </div>
                </form>
            </xen:if>
        </div>       
    </li>
   
    <!-- conversations popup -->
    <li class="navTab inbox Popup PopupControl PopupClosed {xen:if $tabs.inbox.selected, 'selected'}">
                   
        <a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget">
        <i class="material-icons">&#xE0C9;</i>
            <strong class="itemCount {xen:if {$visitor.conversations_unread}, '', 'Zero'}"
                id="ConversationsMenu_Counter" data-text="{xen:phrase you_have_x_new_unread_conversations}">
                <span class="Total">{xen:number $visitor.conversations_unread}</span>
                <span class="arrow"></span>
            </strong>
        </a>
       
        <div class="Menu JsOnly navPopup" id="ConversationsMenu"
            data-contentSrc="{xen:link 'conversations/popup'}"
            data-contentDest="#ConversationsMenu .listPlaceholder">
            <div class="menuHeader primaryContent">
                <h3>
                    <span class="Progress InProgress"></span>
                    <a href="{xen:link conversations}" class="concealed">{xen:phrase conversations}</a>
                </h3>                       
            </div>
           
            <div class="listPlaceholder"></div>
           
            <div class="sectionFooter">
                <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add}" class="floatLink">{xen:phrase start_new_conversation}</a></xen:if>
                <a href="{xen:link conversations}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>
   
    <xen:hook name="navigation_visitor_tabs_middle" />
   
    <!-- alerts popup -->
    <li class="navTab alerts Popup PopupControl PopupClosed">   
                   
        <a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget">
        <i class="material-icons">&#xE003;</i>
            <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}"
                id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
                <span class="Total">{xen:number $visitor.alerts_unread}</span>
                <span class="arrow"></span>
            </strong>
        </a>
       
        <div class="Menu JsOnly navPopup" id="AlertsMenu"
            data-contentSrc="{xen:link 'account/alerts-popup'}"
            data-contentDest="#AlertsMenu .listPlaceholder"
            data-removeCounter="#AlertsMenu_Counter">
            <div class="menuHeader primaryContent">
                <h3>
                    <span class="Progress InProgress"></span>
                    <a href="{xen:link account/alerts}" class="concealed">{xen:phrase alerts}</a>
                </h3>
            </div>
           
            <div class="listPlaceholder"></div>
           
            <div class="sectionFooter">
                <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a>
                <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a>
            </div>
        </div>
    </li>
   
    <li class="navTab logout">
            <a href="logout/" class="LogOut navLink OverlayTrigger" style="color:#FFF!important">
            <i class="material-icons">&#xE5DA;</i>
            </a>
    </li>
       
    <xen:hook name="navigation_visitor_tabs_end" />

 

[Cu tí siêu nhân]

cám ơn bác Đạt

 

[Cu tí siêu nhân]

híc mò mãi chiều h mà e làm chả được, Nhìn cái menu của bác congngheaz mà thèm quá
bác nào hd e chút được ko..hehe! e cám ơn ạ