一下样式，这个用html css div如何实现？？新手 求指教(*^__^*) 10
1个回答
展开全部
<script>
$(function(){
/*$("#ul_list li a").hover(function(){
$(this).css("background","red")},
function(){
$(this).css("background","none")
}
);*/
$("div>ul>li").hide();
$("div>ul").mouseover(function(){
$(this).children().show();
$(this).siblings().children("li").hide();
});
$("div>ul").mouseout(function(){
$(this).children("li").hide();
});
});
</script>
</head>
<style>
.bg{background:green;}
*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
#ul_list{float:left;width:100px;border:1px solid red;border-top:none;}
div{height:31px;width:511px;background:#F00;text-align:center;line-height:30px;}
#ul_list>a{color:#fff;height:30px;width:50px;}
ul li a:hover{background:#60F;color:#fff;}
.current{background:#000;}
</style>
<body>
<div>
<ul id="ul_list">
<a href="#">首页</a>
<li><a href="">子菜单</a></li>
<li><a href="">子菜单</a></li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>。
原理跟这个是一样的，但是只是用html div+css是不行的，还要用JQ、JS。
$(function(){
/*$("#ul_list li a").hover(function(){
$(this).css("background","red")},
function(){
$(this).css("background","none")
}
);*/
$("div>ul>li").hide();
$("div>ul").mouseover(function(){
$(this).children().show();
$(this).siblings().children("li").hide();
});
$("div>ul").mouseout(function(){
$(this).children("li").hide();
});
});
</script>
</head>
<style>
.bg{background:green;}
*{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration:none;}
#ul_list{float:left;width:100px;border:1px solid red;border-top:none;}
div{height:31px;width:511px;background:#F00;text-align:center;line-height:30px;}
#ul_list>a{color:#fff;height:30px;width:50px;}
ul li a:hover{background:#60F;color:#fff;}
.current{background:#000;}
</style>
<body>
<div>
<ul id="ul_list">
<a href="#">首页</a>
<li><a href="">子菜单</a></li>
<li><a href="">子菜单</a></li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
<ul id="ul_list">
<a href="#">首页</a>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>
</div>。
原理跟这个是一样的，但是只是用html div+css是不行的，还要用JQ、JS。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
