我正在使用带有内置下拉菜单的 joomla 模板，该菜单没有太多选项。
这就是我希望菜单的样子: http://i.stack.imgur.com/GMdIc.png
我尝试了很多技巧，例如制作 2-3 或 4 列，但如果“大陆”要显示的国家较少，那么下一个元素将出现在同一大陆。我如何让它像第一张图片中的 table 一样？谢谢
这是我菜单中的 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);
}
}
}
最佳答案
首先你想在行而不是列中工作，这样你就不需要担心了
这是我要使用的 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>
这是一个 fiddle 演示
关于html - joomla 表格中的 CSS 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19279824/