                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了，显示index-menu为0？

/*菜单menu部分*/

.index-menu{

position:relative;

border-top:4px solid #f34949;

}

.index-menu .menu-tips{

position:absolute;

left:50%;

top:0px;

margin-left:-78px;

width:156px;

height:75px;

text-align:center;

line-height:65px;

color:#fff;

background:#f34949;

}

/*菜单提示标签*/

.index-menu .menu-tips:after{

position:absolute;

content:"";

left:0;

buttom:0;

width:0;

height:0;

border-left:78px solid transparent;

border-right:78px solid transparent;

border-bottom:10px solid #fff;

}

慕粉3523303

2016-07-06

源自：从 psd 到 html 4-3

关注问题我要回答

1759

操作

收起

5 回答

慕粉3523303 提问者
2016-07-15

还是要把.index-menu .menu-tips {}位置的position:absolute;改成position:relative;才能被撑开，你发下你的public-container样式，就这个了，其他的没什么不同

.index-menu{

position:relative;

border-top:4px solid #f34949;

}

.index-menu .menu-tips{

position:relative;

left:50%;

top:0px;

margin-left:-78px;

width:156px;

height:75px;

text-align:center;

line-height:65px;

color:#fff;

background:#f34949;

}

/*菜单提示标签

.index-menu .menu-tips:after{

position:absolute;

content:"";

left:0;

buttom:0;

width:0;

height:0;

border-left:78px solid transparent;

border-right:78px solid transparent;

border-bottom:10px solid #fff;

}

.public-container{

position:relative;

margin:0 auto;

width:1100px;

}

1 回复有任何疑惑可以回复我~

收起回答

慕粉3523303 提问者

看错，找出问题了，倒三角不能直接显示那个是因为把bottom:0;打错成buttom了，但是关于index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了这个还是需要把position:absolute;改成position:relative;才可以被撑开

2016-07-15 回复有任何疑惑可以回复我~

慕粉3523303 提问者

直接复制你的代码试的，发现了倒三角的问题，可是原先的问题还是没法解决

2016-07-15 回复有任何疑惑可以回复我~

徐司白3545646
2016-07-14

代码是这样的，你看看你会不会哪里写错或者拼写错了

</div>

/*菜单css部分*/

.index-menu {

position:relative;

border-top:4px soid #f34949;

}

.index-menu .menu-tips {

position:absolute;

left:50%;

top:0;

margin-left:-78px;

width:156px;

height:75px;

text-align:center;

line-height:65px;

color:#fff;

background:#f34949;

}

.index-menu .menu-tips:after {

position:absolute;

content:'';

left:0;

bottom:0;

width:0;

height:0;

border-left:78px solid transparent;

border-right:78px solid transparent;

border-bottom:10px solid #fff;

}

0 回复有任何疑惑可以回复我~

收起回答

慕粉3523303 提问者

找出问题了，倒三角不能直接显示那个是因为把bottom:0;打错成buttom了，但是关于index-menu容器没有被撑开，导致menu-tips直接顶到footer下面去了这个还是需要把position:absolute;改成position:relative;才可以被撑开，直接复制你的代码试的，你发下你的public-container样式看下，是不是哪里不一样了

2016-07-15 回复有任何疑惑可以回复我~