Как создать три столбца в подменю навигации

Мне удалось успешно создать меню навигации с подменю, которое появляется при наведении. Однако я хотел бы, чтобы в моих подменю были столбцы. Я воспользовался советами Ванги Сасидхар по созданию навигации при наведении, теперь мне нужно создать столбцы в пунктах меню «Решения» и «Поддержка».

Вот мой 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;
}

navigation html css multiple-columns submenu
person bdchase    schedule 06.11.2013    source источник
comment
вы должны быть уверены .. column1 и column3 должны располагаться слева; colum2 должен быть размещен справа, это правильно?   -  person manix    schedule 07.11.2013
comment
Я бы хотел, чтобы столбцы 1 2 и 3 были рядом, и под каждым столбцом у меня были бы дополнительные темы. Был опубликован jsfiddle по другому вопросу (jsfiddle.net/qtvVK/11), но я не смог воссоздать его с помощью кода, который я использую (jsfiddle.net/DKu7p). Я не уверен, что я делаю неправильно.   -  person bdchase    schedule 07.11.2013
comment
позвольте мне попробовать, одну секунду (должен быть час)..   -  person manix    schedule 07.11.2013

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, вот моя попытка:

Примените трехколоночный макет 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/

person manix    schedule 07.11.2013