土豆王首页 挖土豆 右边有个combox的效果,怎么实现?

[swordman123]

我已实现了combox 的头部分,选择项却没有显示出来;
可能是combox 所在行的高度是20px;
怎样可以让他下面的选择项显示出来.

[sjmlsxp]

.combo_box ul{
left:0;
min-width:100%;
position:absolute;
top:20px;
z-index:10000;
}
土豆是这样的

[swordman123]

<div class="combox" id="combox">
<div id="sortCurrent" onmousemove="ComboxSelect(true);" onmouseout="ComboxSelect(false)" class="comboxInit">最近流行
</div>
<ul id="comboxlist" class="listShow">
<li><a href="#" rel="sort=new">最近流行</a></li>
<li><a href="#" rel="sort=week">本周最多</a></li>
<li><a href="#" rel="sort=month">本月最多</a></li>
<li><a href="#" rel="sort=all">历史最多</a></li>
</ul>
</div>

css:

.combox ul {
left:0;
min-width:100%;
position:absolute;
top:20px;
z-index:10000;
}

ul 这部分显示不出来,可能是combox 所在行的高度仅20px;

代码要怎样调整

[sjmlsxp]

你把土豆的拷过来不就完了吗？

这个和行高没有关系，他用定位浮出来的
就像你在10cm高的木牌上顶上2M长的海报

[swordman123]

请教sjmlsxp :
定位浮 是设置哪个标记?z-index?

[sjmlsxp]

position:absolute;
z-index是层级
就像高楼大厦那样一层一层

数字大的在上面

[swordman123]

如果combx所在行高20px; combox显示占20px;
选项有4行80px;选项的内容就看不到了

使用z-index也不行;

[sjmlsxp]

你overflow:hidden了？

[swordman123]

没有:

css:

.main .boxRight .combox
{
float:right;
position:absolute;
padding:1px 0 0px 0;
width:80px;
height:20px;
margin:0px;

}
.main .boxRight .combox #combox
{
float:left;
position:absolute;
padding:1px 0 0 0;
width:80px;
height:20px;

margin:0px;
color:#ccc;
z-index:1;
}

.main .boxRight .combox .comboxInit
{
float:left;
position:absolute;
width:80px;
height:20px;
margin:0px;
background-image:url(../img/combox_bg1.gif);
}

.main .boxRight .combox .comboxSelect
{
float:left;
position:absolute;
width:80px;
height:20px;
margin:0px;
background-image:url(../img/combox_bg2.gif);
}

.main .boxRight .combox #sortCurrent
{
float:left;
width:70px;
padding:5px 10px;
position:absolute;
color:#fff;
z-index:2;
}

.main .boxRight .menuChannel .combox ul
{
left:0;
min-width:100%;
position:absolute;
top:20px;
z-index:3;
background: #d8d8d8;

}

.main .boxRight .menuChannel .combox ul .listHidden
{
position:absolute;
width:80px;
display:none;

margin:0px;
z-index:4;
left:0px;
}

.main .boxRight .menuChannel .combox ul .listShow
{

position:absolute;
width:80px;
display:block;

margin:0px;
z-index:4;
left:0px;
}

.main .boxRight .menuChannel .combox ul li {
float:left;
position:absolute;
width:80px;
height:18px;

border-left:#a5a5a5 1px solid;
border-right: #a5a5a5 1px solid;
border-top: #a5a5a5 1px ;
padding:4px 10px 2px 10px;
border-bottom: #b8b8b8 1px solid;
background:#d8d8d8;
}

.main .boxRight .menuChannel .combox ul li .current {display: none;}


html:


<div class="combox" id="combox">
<div id="sortCurrent" onmousemove="ComboxSelect(true);" onmouseout="ComboxSelect(false)" class="comboxInit">
最近流行</div>
<ul id="comboxlist" class="listHidden">
<li class="current"><a href="#" rel="sort=new">最近流行</a></li>
<li><a href="#" rel="sort=week">本周最多</a></li>
<li><a href="#" rel="sort=month">本月最多</a></li>
<li><a href="#" rel="sort=all">历史最多</a></li>
</ul>
</div>

[sjmlsxp]

*{margin:0; padding:0}
.combox
{
position:relative;
padding:1px 0 0px 0;
width:80px;
height:20px;
margin:0px;
}
.combox #combox
{
float:left;
padding:1px 0 0 0;
width:80px;
height:20px;
margin:0px;
color:#ccc;
z-index:1;
}

.combox .comboxInit
{
float:left;
position:absolute;
width:80px;
height:20px;
margin:0px;
background-image:url(../img/combox_bg1.gif);
}

.combox .comboxSelect
{
float:left;
position:absolute;
width:80px;
height:20px;
margin:0px;
background-image:url(../img/combox_bg2.gif);
}

.combox #sortCurrent
{
float:left;
width:70px;
padding:5px 10px;
position:absolute;
z-index:2;
}

.combox ul
{
left:0;
min-width:100%;
position:absolute;
top:20px;
z-index:3;
background: #d8d8d8;
}

.combox ul .listHidden
{
position:absolute;
width:80px;
display:none;

margin:0px;
z-index:4;
left:0px;
}

.combox ul .listShow
{

position:absolute;
width:80px;
display:block;

margin:0px;
z-index:4;
left:0px;
}

.combox ul li {
float:left;
width:80px;
height:18px;

border-left:#a5a5a5 1px solid;
border-right: #a5a5a5 1px solid;
border-top: #a5a5a5 1px ;
padding:4px 10px 2px 10px;
border-bottom: #b8b8b8 1px solid;
background:#d8d8d8;
}

.combox ul li .current {display: none;}
自己在改改吧

[swordman123]

在单独的一个页面可以显示出来,

如果把combox（width:80px height:20px） 放在一个div(width:80px height:20px)里,下面选项显示不出.
层级在这里没有起到作用

[sjmlsxp]

懒得理你了 自己去改，去想，去看土豆的html CSS

[swordman123]

谢楼上！