网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
html吧 关注：182,166贴子：1,338,640
  • 21回复贴，共1页

《新手等回答》关于导航栏的问题

如何实现导航栏下拉而不把导航栏下边的DIV给推走
也就是不要如下图所示 求教 谢谢大神了


没出发javascript的时候是这样子的


触发后后把下面的DIV给推走了


顶


不会，咋办，帮不了你了


我也想知道这个


二级弄绝对定位???


这要用到绝对定位加js的今天刚做完这种案例！


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.css01{
background-image: url(../image/bg1.jpg);
background-repeat: repeat;
height:70px;
}
.css02{
float:left;
font-family:"全新硬笔行书简";
font-size:45px;
font-weight:bold;
background-image: url(../image/bg1.jpg);
background-repeat: repeat-x;
width:14%;
}
.css03{
float:left;
}
.css04{
font-size:26px;
}
</style>
<script language="javascript">
function down(menu){
menu.getElementsByTagName("ul")[0].style.display="block";
}
function nodown(menu){
menu.getElementsByTagName("ul")[0].style.display="none";
}
</script>
</head>
<body>
<div><img src="image/xian3.jpg" width="1067" height="2" /></div>
<div class="css01">
<div class="css02">首页</div>
<div class="css03"><img src="image/xian4.jpg" width="2" height="60" /></div>
<div class="css02" id="Menu1" onmouseover="down(Menu1);" onmouseout="nodown(Menu1);">&nbsp;男子
<ul style="display:none;">
<li class="css04"><a href="">男鞋精品</a></li>
<li class="css04"><a href="">夏日男鞋</a></li>
<li class="css04"><a href="">冬季男鞋</a></li>
</ul>
</div>
<div class="css03" onmouseover="down(Menu1);" onmouseout="nodown(Menu1);"><img src="image/xiabiao.png" width="70" height="70" /></div>
<div class="css03"><img src="image/xian4.jpg" width="2" height="60" /></div>
<div class="css02" id="Menu2" onmouseover="down(Menu2);" onmouseout="nodown(Menu2);">&nbsp;女子
<ul style="display:none;">
<li class="css04"><a href="">女鞋精品</a></li>
<li class="css04"><a href="">夏日男鞋</a></li>
<li class="css04"><a href="">冬季女鞋</a></li>
</ul>
</div>
<div class="css03" onmouseover="down(Menu2);" onmouseout="nodown(Menu2);"><img src="image/xiabiao.png" width="70" height="70" /></div>
<div class="css03"><img src="image/xian4.jpg" width="2" height="60" /></div>
<div class="css02" id="Menu3" onmouseover="down(Menu3);" onmouseout="nodown(Menu3);">&nbsp;儿童
<ul style="display:none;">
<li class="css04"><a href="">儿童精品</a></li>
<li class="css04"><a href="">男装童鞋</a></li>
<li class="css04"><a href="">女装童鞋</a></li>
</ul>
</div>
<div class="css03" onmouseover="down(Menu3);" onmouseout="nodown(Menu3);"><img src="image/xiabiao.png" width="70" height="70" /></div>
<div class="css03"><img src="image/xian4.jpg" width="2" height="60" /></div>
<div><div style="padding-top:20px;" align="center"><input name="name1" type="text" size="20" />&nbsp;<input name="anniu" type="button" value="搜索" /></div>
</div>
</div>
<div>
<a href="#"><img src="image/big.jpg" width="1072" height="683"/></a>
</div>
</body>
</html>


绝对定位加z-index试试


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 21回复贴，共1页
分享到: