JSP网页，HTML怎么用div盒子做弹出式菜单，就是当鼠标移动到目标的超链接时，就会自动弹出一个菜单？
这个菜单只有在鼠标停留在超链接时才会出现，一旦移走鼠标就会自动消失，而且菜单里面是超链接，据说是用层的隐藏与显示来实现？？求具体代码，最好简单明了，谢谢！...
这个菜单只有在鼠标停留在超链接时才会出现，一旦移走鼠标就会自动消失，而且菜单里面是超链接，据说是用层的隐藏与显示来实现？？求具体代码，最好简单明了，谢谢！
展开
6个回答
展开全部
<style type="text/css">
body{padding:0px; margin:0px; font-size:12px;}
#ul1{width:800px; margin:0 auto; height:30px; line-height:30px;list-style:none; background:#CCC;}
#ul1 li{float:left; width:100px; text-align:center;}
#ul1 li a{text-decoration:none; display:block;}
#ul1 li a:hover{background:#FCC;}
#ul1 li div{display:none; background:#FCC; height:0;}
</style>
<script type="text/javascript">
window.onload=function(){
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
lis[i].onmouseover = function(){
this.getElementsByTagName("div")[0].style.display = "block";
};
lis[i].onmouseout = function(){
this.getElementsByTagName("div")[0].style.display = "none";
}
}
}
</script>
<body>
<ul id="ul1">
<li>
<a href="#">1111111</a>
<div><a href="#">111111111</a><a href="#">111111111</a><a href="#">111111111</a></div>
</li>
<li>
<a href="#">1111111</a>
<div><a href="#">111111111</a><a href="#">111111111</a><a href="#">111111111</a></div>
</li>
<li>
<a href="#">1111111</a>
<div><a href="#">111111111</a><a href="#">111111111</a><a href="#">111111111</a></div>
</li>
<li>
<a href="#">1111111</a>
<div><a href="#">111111111</a><a href="#">111111111</a><a href="#">111111111</a></div>
</li>
</ul>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
相对定位和绝对定位，把盒子相对定位，给超链接那个盒子相对定位，不加也行，
给菜单的那个盒子绝对定位，默认是隐藏的也就是display：none，给链接加个伪类hover或者鼠标悬浮事件，onmouseover。具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title></title>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
margin-right: 50px;
}
ul{
list-style: none;
}
div{
width: 120px;
height: 100px;
position: absolute;
border: 1px solid red;
display: none;
}
#d1{
width: 120px;
height: 100px;
position: absolute;
border: 1px solid blue;
display: none;
}
ul li:hover div{
display: block;
}
ul #t:hover div{
display: block;
}
ul #f:hover #d1{
display: block;
}
</style>
</head>
<body>
<ul>
<li id="f">春<div id="d1"></div></li>
<li>夏</li>
<li id="t">秋<div></div></li>
<li>东<div></div></li>
</ul>
</body>
</html>
我没有在div里面写列表，你要写列表直接在div里面加就可以了
给菜单的那个盒子绝对定位，默认是隐藏的也就是display：none，给链接加个伪类hover或者鼠标悬浮事件，onmouseover。具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title></title>
<style type="text/css">
ul li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
margin-right: 50px;
}
ul{
list-style: none;
}
div{
width: 120px;
height: 100px;
position: absolute;
border: 1px solid red;
display: none;
}
#d1{
width: 120px;
height: 100px;
position: absolute;
border: 1px solid blue;
display: none;
}
ul li:hover div{
display: block;
}
ul #t:hover div{
display: block;
}
ul #f:hover #d1{
display: block;
}
</style>
</head>
<body>
<ul>
<li id="f">春<div id="d1"></div></li>
<li>夏</li>
<li id="t">秋<div></div></li>
<li>东<div></div></li>
</ul>
</body>
</html>
我没有在div里面写列表，你要写列表直接在div里面加就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用div+css就可以实现，使用样式display:block;
块级元素默认就是block，思路是:当页面加载时，一级菜单下的二级菜单display设置为none；鼠标移动时样式设为block就可以实现了。可以参考标准之路网站的10天学会div+css
第八天的内容。
块级元素默认就是block，思路是:当页面加载时，一级菜单下的二级菜单display设置为none；鼠标移动时样式设为block就可以实现了。可以参考标准之路网站的10天学会div+css
第八天的内容。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.tankuang {
height: 100px;
width: 100px;
background-color: #000000;
display: none;
}
</style>
</head>
<body>
<script>
function block() {
document.getElementsByClassName("tankuang")[0].style.display = "block";
}
function none() {
document.getElementsByClassName("tankuang")[0].style.display = "none";
}
</script>
<div>
<a href="#" onmousemove="block()" onmouseout="none()">悬浮上来</a>
<div class="tankuang"></div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.tankuang {
height: 100px;
width: 100px;
background-color: #000000;
display: none;
}
</style>
</head>
<body>
<script>
function block() {
document.getElementsByClassName("tankuang")[0].style.display = "block";
}
function none() {
document.getElementsByClassName("tankuang")[0].style.display = "none";
}
</script>
<div>
<a href="#" onmousemove="block()" onmouseout="none()">悬浮上来</a>
<div class="tankuang"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以使用jQuery很简单就能做出来
$("a").mouseover(function(){
$("div").show();
});
$("a").mouseout(function(){
$("div").hide();
});
$("a").mouseover(function(){
$("div").show();
});
$("a").mouseout(function(){
$("div").hide();
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
