CSS menu in tables on joomla - html

Question

I am using a joomla template with a built-in dropdown menu wich doesn't have many options.
This is how i want my menu to look like:
http://i.stack.imgur.com/GMdIc.png
I tried many tricks like making 2-3 or 4 columns but if a "continent" has less countries to be shown then the next item appears in the same continent. How do i make it to be like a table from the 1st image? Thanks
This is the css code in my menu: 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

Firstly you want to work in rows instead of columns as then you won't need to worry about that
Here is the css I would use:
.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>
Here is a fiddle demo
http://jsfiddle.net/Hive7/vMu8e/