2 zh111866 zh111866 于 2014.11.23 20:03 提问

导航菜单下拉把图片顶下去了

只是简单的导航,下面有一张图片,但不管怎么弄,下拉菜单一出来,图片就顶下去了,各位大神帮棒忙?

2个回答

zh111866
zh111866   2014.11.23 20:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档 .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; position:absolute; left:auto; top:230; z-index:999 } /*图片结束*/ /**/ /**/ /**/ /**/

showbo
showbo   Ds   Rxr 2014.11.23 21:12

csdn的代码插入有问题,看不到实际的源代码,经典的css菜单就是父节点position relative定位,子菜单absolute定位,这样子菜单显示就不会占用空间导致图片下滑了。看你的css结构不是这样的,增加下面2个样式试试

#menu li {position:relative}
#menu li dl dd{position:absolute}

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!