應(yīng)用：適用于三級產(chǎn)品分類或文章分類，非頂頭主導(dǎo)航。

1、eyoucms三級橫向彈出菜單代碼-效果圖

2、eyoucms三級橫向彈出菜單代碼-HTML代碼

<ul class="menu-h">
    <li>
        <a href="{$eyou.field.typeid|gettoptype=###,'typeurl'}" title="{$eyou.field.typeid|gettoptype=###,'typename'}" {eyou:eq name='$eyou.field.typeid' value='$eyou.field.typeid|gettoptype=###,typeid'}class="active"{/eyou:eq}>全部</a>
    </li>            
    {eyou:channel type="first" currentstyle="active"}
        {eyou:eq name='$eyou.field.grade' value='2'}
            {eyou:type typeid='$eyou.field.typeid' id='field1'}
                {eyou:eq name='$field1.parent_id' value='$field.id'}
                    {eyou:assign name='$field.currentstyle' value='cur' /}
                {/eyou:eq}
            {/eyou:type}
        {/eyou:eq}
        <li><a href="{$field.typeurl}" title="{$field.typename}" class="{$field.currentstyle}">{$field.typename}
        {eyou:notempty name="$field.children"}<i class="fa fa-angle-down margin-small-left"></i>{/eyou:notempty}</a>
        {eyou:notempty name="$field.children"}
        <ul>
        {eyou:channel name="$field.children" id="field2"}
            <li class="children">
                <a href="{$field2.typeurl}" class="{$field2.currentstyle}" title="{$field2.typename}">{$field2.typename}</a>
            </li>
        {/eyou:channel}
        </ul>
        {/eyou:notempty}
        </li>
    {/eyou:channel}
</ul>

注：<i class="fa fa-angle-down margin-small-left"></i>可以找fontawesome圖標(biāo)對應(yīng)。

3、eyoucms三級橫向彈出菜單代碼-CSS

.menu-h li {position:relative;display:block;float:left}
.menu-h li a{height:69px;line-height:69px;color:#666;display:block;padding:0 20px;font-size:16px}
.menu-h li a.active,.menu-h li a.cur{background: linear-gradient(-45deg,#4276ff,#32b6ff);color:#fff}
.menu-h li.focusa {background: linear-gradient(-45deg,#4276ff,#32b6ff); }
.menu-h li.focusa a{color:#fff}
.menu-h li ul {z-index:99;position:absolute;top:69px;left:0;background:#fff;min-width:200px;display:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px;box-shadow:0 6px 5px 3px rgba(0,0,0,0.06); }
.menu-h li ul li{display:block;width:100%;text-align:left;}
.menu-h li ul li.focusa {background:none;}
.menu-h li ul li.children a{display:block;color:#666;line-height:46px;height:46px;}
.menu-h li ul li.children a.active,.menu-h li ul li.children a:hover{background:#f9f9f9;color:#0F6FDA}
.menu-h li ul li.children:last-child a:hover{border-bottom-left-radius:5px;border-bottom-right-radius:5px;}

/* 移動可以加下面代碼，細(xì)節(jié)可以自調(diào) */
@media screen and (max-width:760px) {
.menu-h li {float:none}
.menu-h li ul {width:100%;}
}

4、eyoucms三級橫向彈出菜單代碼-JS

$(document).ready(function(){
    $('.menu-h li').hover(function(){
    $(this).children('ul').show();
    $(this).focus().addClass('focusa')    
    },function(){
    $(this).children('ul').hide();
    $(this).focus().removeClass('focusa')    
        });    
    });

接下來做一個豎向的手風(fēng)琴三級菜單，適合放左右結(jié)構(gòu)版式結(jié)構(gòu)的。