Xin hướng dẫn làm menu sổ dọc

Hiện tại menu mình không có mấy cái menu sổ dọc khi rê chuột vào



Mình muốn khi thành viên rê chuột vào thì sẽ hiện ra các lựa chọn ntn



Xin mọi người edit code giúp mình
Mình muốn khi rê chuột vào thì hiện ra các lựa chọn mặc định của mã nguồn xenforo
Ví dụ : rê vào DIỄN ĐÀN ( mình sửa lai jthành RAO VẶT ) thì sổ xuống các lựa chọn :

• Đánh dấu đã đọc

• Tìm kiếm diễn đàn

• Watched Forums

• Chủ đề đang theo dõi

• New Posts

Có cái này xin hỏi thêm
Làm sao để web không auto thu nhỏ nhỉ?
Mình muốn chỉnh web cố định ở chiều ngang là 1070px
Cho dù ng dùng thu nhỏ trình duyệt thì tất cả cấu trúc web vẫn đứng yên

Mong các bạn giúp
Cảm ơn

navigation

Mã:

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


<div id="navigation" class="{xen:if $canSearch, withSearch}">
<div class="pageWidth">
    <div class="pageContent">
        <nav>

<div class="navTabs">
    <ul class="publicTabs">
  
        <!-- home -->
        <xen:if is="{$showHomeLink}">
            <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
        </xen:if>
      
      
      




      
        <!-- 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">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
              
          
            </li>
      
            </xen:if>
        </xen:foreach>
        </xen:if>
      
  
      
      
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
          
                <a href="{$tabs.forums.href}" class="navLink">Rao vặt</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
              
              
            </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, 'selected', 'Popup PopupControl PopupClosed'}">
          
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
              
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {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>
      

                  
    <li class="navTab members Popup PopupControl PopupClosed PopupContainerControl">
     <a class="navLink" href="http://www.1doi1.com/raovat/tin-tuc.203/">TIN TỨC</a> </li>
  

  
          
            <ul class="menu_top">
<li> <a href="{xen:link 'brqct-create-thread'}" class="OverlayTrigger callToAction inner">
<span>{xen:phrase create_thread}</span></a> </li>
</ul>
  
  
  
  
        <!-- 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, 'selected', 'Popup PopupControl PopupClosed'}">
          
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
              
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {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:none">  
                      
            <a rel="Menu" class="navLink NoPopupGadget"><span class="menuIcon">{xen:phrase menu}</span></a>
          
            <div class="Menu JsOnly blockLinksList primaryContent" id="NavigationHiddenMenu"></div>
        </li>
          
      
        <!-- no selection -->
        <xen:if is="!{$selectedTab}">
            <li class="navTab selected"><div class="tabLinks"></div></li>
        </xen:if>
      
    </ul>
  
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
    <xen:if is="!{$visitor.user_id}">
      
        <ul class="visitorTabs right">
            <li class="navTab login PopupClosed">
                <label for="LoginControl">
                    <a href="{xen:link login}" class="navLink">
                        <span class="fa fa-sign-in"></span>
                        <strong class="loginText">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</strong>
                    </a>  
                </label>
              
            </li>
        </ul>  
  
      
    </xen:if>  
  
</div>

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

navigation.css

Mã:

#navigation
{
    background-color: #0094ca;
}

#navigation .pageContent
{
    height: 50px;
    position: relative;
}

#navigation .menuIcon
{
    position: relative;
    font-size:18px;
    width: .9em;
    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: 0.4em;*/
    top: {xen:calc 'round(-0.31 + 0.029 * @headerTabHeight, 1)'}em;
    left: 0;
    width: .9em;
    height: 0.125em;
    border-top: 0.375em double currentColor;
    border-bottom: 0.125em solid currentColor;
}

    .navTabs
    {
        @property "navTabs";
        font-size: 14px;
        color: #c4e1ff;
        padding: 0;
        text-transform: uppercase;
        @property "/navTabs";
      
        height: @headerTabHeight;
    }
  
        .navTabs .publicTabs
        {
            float: left;
        }
      
        .navTabs .visitorTabs
        {
            float: right;
        }
  
            .navTabs .navTab
            {
                float: left;
                white-space: nowrap;
                word-wrap: normal;
              
                <xen:if is="{$pageIsRtl}">*display: inline; *float: none; *zoom: 1;</xen:if>
            }
          
            .navTabs .visitorTabs .navTab
            {
                margin-left: 2px;
            }


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

.navTabs .navLink,
.navTabs .SplitCtrl
{
    @property "navLink";
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    @property "/navLink";
  
    <xen:if is="{$pageIsRtl}">*float: none; *display: inline; *zoom: 1;</xen:if>
  
    height: @headerTabHeight;
    line-height: @headerTabHeight;
}

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

    .navTabs .navTab.PopupClosed
    {
        position: relative;
    }
  
    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }
  
        .navTabs .navTab.PopupClosed:hover
        {
            background-color: #28618f;
            color: @textCtrlBackground;
        }
      
            .navTabs .navTab.PopupClosed .navLink:hover
            {
                color: @textCtrlBackground;
            }
      
    .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('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -128px {xen:calc '(@headerTabHeight - 17) / 2 + 1'}px;
        }
  
    /* ---------------------------------------- */
    /* selected tab */

    .navTabs .navTab.selected .navLink
    {
        background: url('@imagePath/extra/arrow-02.png') center 40px no-repeat;
        position: relative;
        @property "navTabSelected";
        color: @textCtrlBackground;
        @property "/navTabSelected";
        font-weight: bold;
    }
  
    .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
    {
        @property "popupControl";
        /*color: @mutedTextColor;
        background-color: #fe9100;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        _color: @mutedTextColor;
        */
/*text-shadow: 1px 1px 2px white;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;*/
        @property "/popupControl";
    }
  
/* ---------------------------------------- */
/* Second Row */

.navTabs .navTab.selected .tabLinks
{
    @property "navTabSelected.background";

    @property "/navTabSelected.background";
  
    width: 100%;  
    padding: 0;
    border: none;
    overflow: hidden; zoom: 1;  
    position: absolute;
    left: 0px;  
    top: @headerTabHeight;
    height: @headerTabHeight;
    background-position: 0px -@headerTabHeight;
    *clear:expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}

    .navTabs .navTab.selected .blockLinksList
    {
        background: none;
        padding: 0;
        border: none;
    }

    .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;
        margin-left: 8px;
    }
  
        .navTabs .navTab.selected .tabLinks a
        {
            @property "navTabLink";
            font-size: 14px;
            color: @primaryLighter;
            padding: 0 10px;
            display: block;
            text-transform: none;
            @property "/navTabLink";
          
            line-height: {xen:calc '@headerTabHeight - 4'}px;
        }
      
        .navTabs .navTab.selected .tabLinks .PopupOpen a
        {
            color: inherit;
            text-shadow: none;
        }
      
            .navTabs .navTab.selected .tabLinks a:hover,
            .navTabs .navTab.selected .tabLinks a:focus
            {
                @property "navTabLinkHover";

                @property "/navTabLinkHover";
            }
          
            .navTabs .navTab.selected .tabLinks .Popup a:hover,
            .navTabs .navTab.selected .tabLinks .Popup a:focus
            {
                color: inherit;
                background: none;
                border-color: transparent;
                border-radius: 0;
                text-shadow: none;
            }
  
/* ---------------------------------------- */
/* Alert Balloons */
  
.navTabs .navLink .itemCount
{
    @property "alertBalloon";
    font-weight: bold;
    font-size: 9px;
    color: white;
    background-color: #e03030;
    padding: 0 2px;
    border-radius: 2px;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 16px;
    min-width: 12px;
    _width: 12px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    word-wrap: normal;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.25);
    height: 16px;
    @property "/alertBalloon";
}

    .navTabs .navLink .itemCount .arrow
    {
        @property "alertBalloonArrow";
        border: 3px solid transparent;
        border-top-color: #e03030;
        border-bottom: 1px none black;
        position: absolute;
        bottom: -3px;
        right: 4px;
        line-height: 0px;
        text-shadow: none;
/* Hide from IE6 */
width: 0px;
        height: 0px;
        @property "/alertBalloonArrow";
    }
  
.navTabs .navLink .itemCount.Zero
{
    display: none;
}

.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 .accountUsername
    {
        display: block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#AccountMenu
{
    width: 274px;
    border-radius: 2px;
}

#AccountMenu .menuHeader
{
    position: relative;
}

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

    #AccountMenu .menuHeader .visibilityForm
    {
        margin-top: 10px;
        color: @primaryMedium;
    }
  
    #AccountMenu .menuHeader .links .fl
    {
        position: absolute;
        bottom: 10px;
        left: {xen:calc '10 + 10 + 100'}px;
    }

    #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;
    border-radius: 2px;
}

.navPopup a:hover,
.navPopup .listItemText a:hover
{
    background: none;
  
}

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

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

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

        .navPopup .listPlaceholder ol.secondaryContent.Unread
        {
            background-color: @inlineModChecked.background-color;
        }

.navPopup .listItem
{
    overflow: hidden; zoom: 1;
    padding: 5px 10px;
    border-bottom: 1px solid @primaryLightest;
}

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

.navPopup .PopupItemLinkActive:hover
{
    background-color: @primaryLighter;
    cursor: pointer;
}

.navPopup .avatar
{
    float: left;
}

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

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

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

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

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

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .navTabs
    {
    }

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

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

@media (max-width: 320px)
{
    .Responsive .withSearch .navTabs .navTab.selected .blockLinksList
    {
        margin-right: 0;
    }
  
    .Responsive .navTabs .navTab.selected .tabLinks li
    {
        margin-left: 0;
    }
  
    .Responsive .navTabs .navTab.selected .tabLinks a
    {
        font-size: 12px;
        padding: 0 8px;
    }
}

</xen:if>

 

Ai giúp với ta

 

Cái vần đề responsive thì vào style properties tắt bỏ là dc

 

có thể chỉ cụ thể được không bạn. mình không biết cụ thể là chổ nào

 

Style bạn đang xài -> Style Properties -> Responsive Design -> Bỏ hết dấu tick

 

Mình bỏ tick đi rồi mà ko thấy gì hết