CSS: раскрывающийся список из нескольких столбцов

Question

jsFiddle: http://jsfiddle.net/4z2Vx/

Я пытаюсь создать виджет выпадающего меню / меню из нескольких столбцов.

Изображение слева на моем веб-сайте, слева внутри jsFiddle. Помимо очевидного цвета + шрифта, я не уверен, почему jsFiddle вмешивается в выравнивание. Это не проблема, проблема в том, что первый столбец скрыт под вторым ... Я пытался часами, но не могу отобразить их рядом.

Answer 1

Проблема в том, что float не работает с абсолютно позиционированными элементами, вы можете либо реструктурировать свой html, чтобы у вас был абсолютно позиционированный родительский элемент выше .first и .second (как ответ Грисволдо);или установите ширину для выпадающих меню и затем расположите их:

.dropdown li ul { 
    display: none; 
    border:black 1px solid;  
    position:absolute;
    background-color:white; 
    width: 150px;  /*set the width*/  
} 


.second {
    left: 150px; /*set the position*/
}​

http://jsfiddle.net/tYeDk/

Answer 2

Хорошо, я просмотрел ваш код и понял, что вам нужно что-то вроде мегамену. В вашем коде ... Вы отравили свое абсолютное подменю, и именно поэтому оно игнорирует плавающее.

Для этого вам нужно сделать ребенка для вашего абсолютного положения

Так что ваш HTML будет

<div class="dropdown">
<ul id="menus"><li>Collections
        <ul class="sub">
            <ul>        
            <li><a href="#">ABC/BBC</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Animated</a></li>
            <li><a href="#">Children</a></li>
            <li><a href="#">Documentary</a></li>
            <li><a href="#">Drama</a></li>
            <li><a href="#">Cult</a></li>
    </ul>
    <ul>
            <li><a href="#">Family</a></li>
            <li><a href="#">Fantasy</a></li>
            <li><a href="#">Horror</a></li>
            <li><a href="#">Lifestyle</a></li>
            <li><a href="#">Mystery</a></li>
            <li><a href="#">Reality</a></li>
            <li><a href="#">Sciene fiction</a></li>
       </ul>
      </ul>


</li>
</ul>
</div>​

и css будет

.dropdown
{
    font-size:16px;
    font-weight:400;  
    line-height:40px;
    text-indent:15px;
    padding-right:15px;
    vertical-align:middle;
    display:inline-block;
}

.dropdown:hover
{
    background-color:green;
}

.dropdown li ul.sub { 
    display: none; 
    border:black 1px solid;  
    position:absolute;
    background-color:white;    
} 

.dropdown ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

.dropdown a
{
    display:block; 
    padding-right:15px;  
    line-height:30px; 
}

.dropdown a:hover {
    color: rgb(0,0,0);
    text-decoration: underline;
}

.dropdown li:hover
{
    background-color:green;
}

#menus ul.sub ul{
    float:left
}​

с этим вы можете добавить ul столько, сколько хотите ...

Answer 3

Проблема, кажется,

position: absolute;

в правиле .dropdown li ul. Если вы удалите это, а затем переместите ссылку «коллекции» из ul, то вы сможете увидеть оба меню рядом (и под «коллекциями»). Кроме того, вы должны установить float влево для .first и .second, если вы хотите, чтобы они находились рядом друг с другом.

Проверьте этот быстрый мод, который я сделал для вашей скрипки (не идеально, но я думаю, вы можете взять его отсюда): http://jsfiddle.net/4z2Vx/29/