joomla上的表格中的CSS菜單

Question

我使用了一個帶有內置下拉菜單的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); 
     } 
    } 
} 

}

Answer 1

首先要在行而不是列上班，那麼你就不用擔心

這裏是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/