0

我正在使用带有内置下拉菜单的 joomla 模板,它没有很多选项。

这就是我希望我的菜单看起来的样子:http: //i.stack.imgur.com/GMdIc.png

我尝试了许多技巧,例如制作 2-3 或 4 列,但如果“大陆”显示的国家较少,则下一个项目将出现在同一大陆。我如何使它像第一张图片中的桌子?谢谢

这是我菜单中的 CSS 代码:http: //jsfiddle.net/AUCGy/

.gf-menu {
// Menu positioning margin: 0px auto 0;
list-style: none;
// Clears &:after {
    display: table;
    content:'';
    clear: both;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
hover {
    background:#000;
}
// Basic font stuff .item {
    font-size: @menuFontSize;
    line-height: @menuLineHeight;
    color: #000000;
    padding: 10px 15px;
    text-align: left;
    text-shadow: 1px 1px 0 @menuTextShadow;
    text-decoration: none;
    display: block;
    outline1: 0;
    cursor: pointer;
    .transition(background 0.2s ease-out, border 0.2s ease-out);
    // Subtext styling &.subtext {
        > em {
            bottom: -42px;
            height: 42px;
            font-size: @menuFontSize + 2;
            color: @000000;
            font-style: normal;
        }
    }
    // Menu icon tweaks &.icon {
        [class^="icon-"], [class*=" icon-"] {
            background-image: none !important;
            width: auto;
            &:before {
                text-indent: 0;
                margin-right: 5px;
            }
        }
    }
    // Menu Image tweaks .menu-image {
        max-width: inherit;
        vertical-align: text-top;
        margin-top: 0px;
        margin-left: -2px;
    }
}
// Level 1 Style Overrides &.l1 {
    > li.active {
    }
    > li > .item {
        font-size: @menuFontSize + 3;
        line-height: @menuLineHeight + 2;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 1px;
        padding-right: 1px;
        position: relative;
        &.subtext {
            padding-top:1px;
            padding-bottom: 4px;
        }
        .menu-image {
            margin-top: -1px;
        }
    }
}
// Default items li {
    float: left;
    display: block;
    text-align: center;
    position: relative;
    padding: 0;
    border: none;
    border: none;
    margin-right: 10px;
}
// Parent items li.parent {
    > .item {
        position: relative;
        &:after {
            color: @menuArrowColor;
            position: absolute;
            right: 6px;
            top: 50%;
            margin-top: -12px;
            font-family: FontAwesome;
            // content:"\f0d7";
            // icon-caret-down content: none;
            // icon-chevron-down font-size: 25px;
        }
    }
}
// Dropdown styling .dropdown {
    margin: 0 auto;
    margin-left: 1px;
    padding: 0px 0;
    position: absolute;
    opacity: 0;
    left: -999em;
    text-align: left;
    border: none;
    background: #FAEFAA;
    .transition(opacity 0.2s ease-out);
    .border-radius(0 !important);
    .box-shadow(@menuFullShadow);
    z-index: 1000;
    .flyout {
        display: block;
    }
    ul {
        li {
            display:block;
            float:none;
            font-size: 20px;
            margin-right: 0;
            padding: 0 0px;
            border: 0;
            border-bottom: 1px solid @menuDropdownborderbottom;
            &.active {
                > .item {
                    color: @menuTextHover;
                    background:#fff url(templates/insightfx/images/icons/afri.png) no-repeat 0 -20px;
                }
            }
            .item {
                color: #000000 !important;
                text-shadow1: 1px 1px 0 @menuTextShadow1 !important;
                font-size: 12px;
            }
            &.parent {
                > .item:after {
                    margin-top: -10px;
                    font-family: FontAwesome;
                    // content:"\f0da";
                    // icon-caret-right content:"\f054";
                    // icon-chevron-right font-size: 25px;
                }
            }
        }
    }
    // Grouped styling .grouped {
        &.parent {
            > .item {
                .border-fixer {
                    display:none;
                }
                &:after {
                    font-family: FontAwesome;
                    // content:"\f0d7";
                    // icon-caret-down content:"\f078";
                    // icon-chevron-down font-size: 11px;
                }
            }
        }
        ol {
            background: @menuActiveBack;
            border: 1px solid @menuActiveBorder;
            .box-shadow(@menuActiveShadow);
            margin: 0px 0px;
            padding: 0px 0;
            > li {
                > .item {
                    font-size: @menuFontSize - 1;
                    padding-top: 3px;
                    padding-bottom: 3px;
                }
            }
        }
    }
    // Module styling .modules {
        text-align: left;
        color: @moduleTextColor;
        .module-content {
            padding: 5px 10px;
            h1, h2, h3, h4, h5 {
                color: @moduleHeaderColor;
            }
            a {
                color: @moduleLinkColor;
            }
            p {
                margin: 0 0 10px 0;
                font-size: @menuFontSize - 1;
                line-height: @menuLineHeight - 3;
            }
        }
    }
}
// Flyout Dropdown (3rd Level +) .flyout {
    border-top: 1px solid @menuBorder;
}
// Columns .column {
    float: left;
    position: relative;
}
// Alignment Helpers .position-left {
    float: left;
    margin-right: 15px;
}
.position-right {
    float: right;
    margin-left: 15px;
}
// Splitmenu specific fixes &.gf-splitmenu {
    li.parent {
        &:hover {
            .border-radius(@menuItemRadius);
        }
    }
}

}

4

1 回答 1

0

首先你想在行而不是列中工作,因为你不需要担心

这是我将使用的 css:

.row-item {
    display: block;
    float: left;
    padding: 5px;
    border-left: solid 1px black;
    border-right: solid 1px black;
}
.row {
    position: relative;
    display: block;
    float: left;
    clear: left;
}
.continent {
    background: maroon;
    color: wheat;
}
.country {
    background: wheat;
    color: maroon;
}

HTML:

<div class='row'>
    <div class='continent row-item'>
        Continent
    </div>
    <div class='row-item country'>
        Country
    </div>
</div>
<div class='row'>
    <div class='continent row-item'>
        Continent
    </div>
    <div class='row-item country'>
        Country
    </div>
</div>

这是一个小提琴演示

http://jsfiddle.net/Hive7/vMu8e/

于 2013-10-09T18:48:09.880 回答