Question

今天下午制作了这个菜单。标签号1有一个下拉列表，其中包含两个div，每个div应该向左浮动，因此有两个div彼此相邻，但是，它不起作用，第二个排在第一个下面。

这是我认为会浮动的行：

/*sub container div*/
.container ul li .drop div{
float:left;
}

Fiddle

HTML

<!-- start menu -->
<div id="top_menu">
    <nav>
        <div class="container">
            <ul>
                <li><a href="/#"><img class="home" alt="" height="20" src="/images/trans.gif" width="20"> </a></li>
                <li><a href="/number1">number 1</a>
                    <div class="drop">
                        <div>
                            <a href="/cat1">category 1</a>
                            <ul>
                                <li><a href="/1">test1</a></li>
                                <li><a href="/2">test2</a></li>
                                <li><a href="/3">test3</a></li>
                                <li><a href="/4">test4</a></li>
                            </ul>
                            <a href="/cat2">category 2</a>
                            <ul>
                                <li><a href="/1">test1</a></li>
                            </ul>
                        </div>
                        <div>
                            <a href="/cat3">category 3</a>
                            <ul>
                                <li><a href="/1">test1</a></li>
                                <li><a href="/2">test2</a></li>
                                <li><a href="/3">test3</a></li>
                                <li><a href="/4">test4</a></li>
                            </ul>
                            <a href="/cat4">category 4</a>
                            <ul>
                                <li><a href="/1">test1</a></li>
                            </ul>
                            <a href="/cat5">category 5</a>
                            <ul>
                                <li><a href="/1">test1</a></li>
                            </ul>
                        </div>
                        <div>
                    </div>
                </li>
                <li><a href="/number2">number 2</a></li>
                <li><a href="/number3">number 3</a></li>
                <li><a href="/number4">number 4</a></li>
                <li><a href="/number5">number 5</a></li>
            </ul>
        </div>
    </nav>
</div>
<!-- end menu -->

CSS

#top_menu{
background:#cccccc url('/images/top_menu_bg.png') repeat;
}

.container{
position:relative;
z-index:1000;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
}

.container ul{
white-space:nowrap;
/*display:table;*/
}

.container ul, .container li{
padding:0;
margin:0;
list-style:none;
}

/*top level link*/
.container ul a{
display:block;
color:#666666;
text-decoration:none;
padding:0 25px;
line-height:40px;
border-right:1px #b2b2b2 solid;
}

/*sub container*/
.container ul li .drop{
position:absolute;
background:#fdfdfd;
-moz-border-radius:0 0 8px 8px;
-webkit-border-radius:0 0 8px 8px;
border-radius:0 0 8px 8px;
display:none;
border-left:1px #b2b2b2 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
}

/*sub container div*/
.container ul li .drop div{
float:left;
}


.container ul li .drop li{
display:block;
border:0;
}

.container > ul > li{
float:left;
display:block;
position:relative;
}

.container ul li:hover > .drop{
top:auto;
display:block;
}

/*sub level top link*/
.container ul li .drop a{
line-height:25px;
border:0;
padding:0 30px 0 10px;
color:#000000;
}

/*sub level top link hover*/
.container ul li .drop a:hover{
color:#00396d;
background:#c4dcec;
}

/*sub level link normal*/
.container ul li .drop li > a{
color:#666666;
}

/*sub level link hover*/
.container ul li .drop li:hover > a{
background:#c4dcec;
color:#00396d;
}

/*top level link hover*/
.container li:hover > a{        
color: #000000;
}

/*home button*/
.container ul li img.home{
background:url('/images/top_menu_home.png') 0 0;
width:20px;
height:20px;
}

/*home button hover*/
.container ul li:hover > a img.home{
background:url('/images/top_menu_home.png') -20px 0;
}

Answer 1

    .container ul li .drop{
    position:absolute;
    background:#fdfdfd;
    -moz-border-radius:0 0 8px 8px;
    -webkit-border-radius:0 0 8px 8px;
    border-radius:0 0 8px 8px;
    display:none;
    border-left:1px #b2b2b2 solid;
    border-right:1px #b2b2b2 solid;
    border-bottom:1px #b2b2b2 solid;
        width: 300px;                            //set width
}

/*sub container div*/
.container ul li .drop div{
    float:left;
    width:50%;                                   //optional
}

Answer 2

很抱歉迟到的回复=）但是，如果你想要水平堆叠几个可变宽度的元素，我建议使用 display：inline-block 。

/*sub container div*/
.container ul li .drop div{
display:inline-block;
    vertical-align:top;
}

The fiddle（适用于fFF 8，Chrome 12，IE 9）。

缺点是元素之间的空格，可以是successfully eliminated

下拉菜单浮动问题

2 个答案: