css纵向导航下拉菜单效果如何实现?
http://www.fortuneage.com/news/这个网站里左侧导航鼠标划过行业资讯时出现的下拉菜单效果怎么实现就是这种导航实现的代码要完整的谢了...
http://www.fortuneage.com/news/
这个网站里左侧导航鼠标划过 行业资讯 时出现的下拉菜单效果怎么实现
就是这种导航实现的代码 要完整的 谢了 展开
这个网站里左侧导航鼠标划过 行业资讯 时出现的下拉菜单效果怎么实现
就是这种导航实现的代码 要完整的 谢了 展开
1个回答
展开全部
你给的那个网站使用了jQuery框架来实现的,下面给你一个简单的例子(前提是你必须先要引用jQuery框架):
<script>
window.onload = function()
{
//说明:当鼠标移动到li标签上的时候,显示当前标签下ul标签,反之隐藏
$('li').mouseover(function(){
$(this).find('ul').show(); //显示当前li下面的ul
}).mouseout(function(){
$(this).find('ul').hide(); //隐藏
});
}
</script>
<div>
<ul>
<li>
一级栏目1
<ul style="display:none">
<li>二级栏目1</li>
<li>二级栏目2</li>
<li>二级栏目3</li>
</ul>
</li>
<li>一级栏目2</li>
<li>一级栏目3</li>
<ul>
</div>
<script>
window.onload = function()
{
//说明:当鼠标移动到li标签上的时候,显示当前标签下ul标签,反之隐藏
$('li').mouseover(function(){
$(this).find('ul').show(); //显示当前li下面的ul
}).mouseout(function(){
$(this).find('ul').hide(); //隐藏
});
}
</script>
<div>
<ul>
<li>
一级栏目1
<ul style="display:none">
<li>二级栏目1</li>
<li>二级栏目2</li>
<li>二级栏目3</li>
</ul>
</li>
<li>一级栏目2</li>
<li>一级栏目3</li>
<ul>
</div>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询