Question

我正在尝试创建一个多列下拉列表/菜单小部件。

enter image description here

左边的图像在我的网站上，左边是jsFiddle。除了明显的颜色+字体外，我不确定为什么jsFiddle会篡改对齐。这不是问题，问题是第二列被隐藏在第二列......我已经试了好几个小时但是不能让它们并排显示。

Answer 1

问题在于float无法对绝对定位的元素起作用，您可以重新构建html，以便在.first和.second之上有一个绝对定位的父级（如griswoldo的回答）;或设置下拉列表的宽度，然后定位它们：

.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

问题似乎是

position: absolute;

在.dropdown li ul规则中。如果删除它然后将“集合”链接移出ul，那么您可以并排看到两个菜单（并在“集合”下面）。另外，如果你想让它们彼此相邻，你应该为.first和.second设置float to left。

查看我对你的小提琴做的这个快速模式（不完美，但我想你可以从这里开始）：http://jsfiddle.net/4z2Vx/29/

Answer 3

好的，我已经完成了你的代码并明白你需要一种megamenu。在你的代码中...你已经毒害了你的子菜单ul绝对，这就是它忽略浮动的原因。

为此你需要让孩子为yoru绝对定位

所以你的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 ...

CSS：多列下拉列表

3 个答案: