html - 如何在导航子菜单中创建三列

Question

我能够成功地创建一个带有悬停时显示的子菜单的导航菜单。但是，我希望我的子菜单有列。我使用了 Vanga Sasidhar 关于创建悬停导航的技巧，现在我需要在“解决方案”和“支持”菜单项下创建列。

这是我的 jsfiddle:http://jsfiddle.net/DKu7p/ .

这是我的 CSS:

.site-nav li { 
display:block;
float:left;
list-style:none;
margin: 0;
position: relative;
width: 100px;
}

.site-nav li:hover {
background:#1f78c3;
cursor:pointer;
}
.site-nav li a { 
color:#696969;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}

.site-nav li a:hover {
color:#00598B;
display:block;
text-align:center;
text-decoration:none;
padding:5px 10px;
}

.site-nav .dropdown { 
    display : none; 
    position : relative;
}
.site-nav .dropdown li { float : none; }
.site-nav li:hover .dropdown { display : block; position: relative; }

.dropdown {
background: #fff;
border: 1px solid #fff;
border-top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
list-style: none;
margin: 4px 0 0 -9px;
min-width: 150px;
overflow: hidden;
padding: 0;
position: relative;
z-index: 999;
}
.dropdown li {
border: 0;
border-radius: 0;
clear: both;
float: none;
font-size: .9em;
margin: 0;
width: 100%;
}
.dropdown li span {
display: none !important;
}
.dropdown li a {
background: none;
color: #333;
display: block;
font-size: 1.1em;
font-weight: normal;
padding: 5px 8px;
text-align: left;
text-shadow: none;
 }
.dropdown li a:hover {
background: #ddd;
color: #0c84bb;
text-decoration: none;
}

.dropdown .last a {
border-bottom: none;
}

Answer 1

好的，这是我的尝试:

应用三列CSS布局

.col-columned{
    width: 450px;
}
.col-maincontainer{
width: 450px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
.col-maincontainer ul, .col-maincontainer ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.col-contentwrapper{
float: left;
width: 100%;
}

.col-contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

.col-leftcolumn{
float: left;
width: 150px; /*Width of left column in pixel*/
margin-left: -450px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

.col-rightcolumn{
float: left;
width: 150px; /*Width of right column*/
margin-left: -150px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

.col-innertube{
margin: 3px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

然后，添加一个带有三列 html 标记的新元素:

<a class="drop-link">Example1</a>
<ul class="dropdown col-columned">
    <li>
        <div class="col-maincontainer">
            <div class="col-contentwrapper">
                <div class="col-contentcolumn">
                    <div class="col-innertube">
                        <div class="wiki-tree">
                            <ul>
                                <li><a class="dropdown-title">topic1</a></li>
                                <li><a class="dropdown-title">topic2</a></li>
                                <li><a class="dropdown-title">topic3</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-leftcolumn">
                <div class="col-innertube">
                    <div class="wiki-tree">
                        <ul>
                            <li><a class="dropdown-title">topic1</a></li>
                            <li><a class="dropdown-title">topic2</a></li>
                            <li><a class="dropdown-title">topic3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-rightcolumn">
                <div class="col-innertube">
                    <div class="wiki-tree">
                        <ul>
                            <li><a class="dropdown-title">topic1</a></li>
                            <li><a class="dropdown-title">topic2</a></li>
                            <li><a class="dropdown-title">topic3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </li>

</ul>

确保将 col-columned 添加到下拉元素中，如下所示:

<ul class="dropdown col-columned">

这里是活生生的例子:http://jsfiddle.net/8fgG5/1/