导航下拉菜单把下面的图片顶下去了
css吧
全部回复
仅看楼主
level 3
慧星星宇 楼主
2014年11月23日 12点11分 1
level 3
慧星星宇 楼主
<body>
<!--导航开始-->
<div>
<ul id="menu">
<li>
<dl>
<dt><a href="#">全部分类</a></dt>
<dd><a href="#">精选</a></dd>
<dd><a href="#">风景</a></dd>
<dd><a href="#">美女</a></dd>
<dd><a href="#">美男</a></dd>
<dd><a href="#">动漫</a></dd>
<dd><a href="#">卡通</a></dd>
<dd><a href="#">静物</a></dd>
<dd><a href="#">萌宠</a></dd>
<dd><a href="#">汽车</a></dd>
<dd><a href="#">游戏</a></dd>
<dd><a href="#">影视</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">精选</a></dt>
<dd><a href="#">每日精品</a></dd>
<dd><a href="#">周最热</a></dd>
<dd><a href="#">护眼</a></dd>
<dd><a href="#">动态壁纸</a></dd>
<dd><a href="#">感恩节</a></dd>
<dd><a href="#">射手座</a></dd>
<dd><a href="#">单车时光</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">风景</a></dt>
<dd><a href="#">空山</a></dd>
<dd><a href="#">四季</a></dd>
<dd><a href="#">沿海印记</a></dd>
<dd><a href="#">阳光正好</a></dd>
<dd><a href="#">微观世界</a></dd>
<dd><a href="#">最美天空</a></dd>
<dd><a href="#">平凡之路</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">美女</a></dt>
<dd><a href="#">宋茜</a></dd>
<dd><a href="#">杨幂</a></dd>
<dd><a href="#">少女时代</a></dd>
<dd><a href="#">范冰冰</a></dd>
<dd><a href="#">刘亦菲</a></dd>
<dd><a href="#">校花</a></dd>
<dd><a href="#">深林系女孩</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">美男</a></dt>
<dd><a href="#">李易峰</a></dd>
<dd><a href="#">super junner</a></dd>
<dd><a href="#">刘德华</a></dd>
<dd><a href="#">邓超</a></dd>
<dd><a href="#">吴奇隆</a></dd>
<dd><a href="#">韩庚</a></dd>
<dd><a href="#">吴京</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">动漫</a></dt>
<dd><a href="#">火影忍者</a></dd>
<dd><a href="#">柯南</a></dd>
<dd><a href="#">海贼王</a></dd>
<dd><a href="#">黑执事</a></dd>
<dd><a href="#">进击的巨人</a></dd>
<dd><a href="#">银魂</a></dd>
<dd><a href="#">阿狸</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">周最热</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">日最热</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">每日精品</a></dt>
</dl>
</li>
<li>
<dl>
<dt><a href="#">拾光</a></dt>
</dl>
</li>
</ul>
<div>
<!--导航结束-->
<div class="clearfloat"/>
<!--图片开始-->
<div id="">
<img src="picture.jpg"/>
</div>
<!--图片结束-->
<div class="clearfloat"/>
</body>
2014年11月23日 12点11分 2
level 3
慧星星宇 楼主
<style type="text/css">
.clearfloat{
clear:both;
height:0;
font-size:0;
line-height:0;
}
a{text-decoration:none;}
/*导航开始*/
#menu{
font-size:18px;
margin:0 auto;
width: 1202px;
padding:0;
background:#333;
}
#menu li{
float:left;
padding:0;
margin:0;
width:120px;
list-style:none;
}
#menu li dl{
border:1px solid #000;
width:120px;
margin:0;
padding:0 0 5px 0;
background:#333;
}
#menu li dl dt a{
display:block;
color:#FFF;
}
#menu li dl dt{
margin:0;
padding:10px 10px 5px 10px;
text-align:center;
background:#333;
}
#menu li dl dd{
margin:0;
padding:0;
color:#999;
background:#666;
}
#menu li dl dd a{
display:block;
color:#FFF;
padding:5px 0px 5px 5px;
}
#menu li dl dd{
display:none;
}
#menu li:hover dd{
display:block;
}
#menu li dl dd a:hover{
background:#333;
}
#menu li dl dd a:active{
background:#000;
}
/*导航结束*/
/*图片开始*/
#picture{
width:1202px;
}
/*图片结束*/
/**/
/**/
/**/
/**/
</style>
2014年11月23日 12点11分 3
level 5
342542615
给下面图片的容器的父级添加相对定位 position:relative;
给导航的容器添加绝对定位 position:absolute; top:Xpx;
其中X的值等于导航显示在页面上的高度 看你这个页面应该是40px;
2014年11月24日 02点11分 4
慧星星宇
嗯嗯，我试试
2014年11月24日 02点11分
cake3362015
正解
2017年06月14日 05点06分
level 6
771271668
没有做定位吧
2014年11月24日 02点11分 5
慧星星宇
定位以后，下拉菜单只显示最后一项，其他都被顶跑了
2014年11月24日 02点11分
level 6
771271668
你是要这样吗？
2014年11月24日 05点11分 6
慧星星宇
就是我发的那张图，出现下拉菜单时，那张背景图片不动
2014年11月24日 16点11分
慧星星宇
写有梦想的那张图被顶了下去
2014年11月24日 16点11分
771271668
回复 慧星星宇 :我用了position:fixed
2014年11月27日 09点11分
level 11
十月弓虽
让他定位
2014年11月25日 03点11分 7
level 2
委婉且柔顺灬比目鱼01
我上次碰到类似的问题：用Z-Index 前提是得先定位 具体你去查下这个标签用法就知道了
2014年11月25日 08点11分 8
level 7
肥鱼叼草
绝对定位就不占文档流啦
2014年11月28日 00点11分 9
level 12
淹没的海平线_
导航栏子元素要绝对定位
2014年11月28日 10点11分 10
level 5
默沫本人
为什么不设图片为背景图呢？那样不就省事了吗？（我是新人，如果问题白痴请原谅，希望楼主回答）
2014年11月29日 18点11分 11
level 6
chukaif
下拉菜单用相对定位或者绝对定位
2014年12月03日 04点12分 12
1