0

今天下午做了这个菜单。选项卡编号 1 有一个下拉列表，其中包含两个 div，每个 div 都应该向左浮动，因此有两个相邻的 div，但是，它不起作用，第二行在第一个下方。

这是我认为会做浮动的线：

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

小提琴

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;
}
4

2 回答 2

0

抱歉回复晚了=）不过，如果你想水平堆叠几个可变宽度的元素，我建议使用display:inline-block。

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

小提琴（适用于 fFF 8、Chrome 12、IE 9）。

缺点是元素之间的空间，可以成功消除

于 2013-08-21T06:13:37.530 回答
0 
    .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
}
于 2013-01-27T00:49:27.470 回答