当前位置: 首页 » 笔记 » 纯DIV+CSS弹出导航菜单代码-鼠标移过弹出层正文

纯DIV+CSS弹出导航菜单代码-鼠标移过弹出层

  • 零分
  • 2,891

鼠标移过弹出层,不是很必要的时候,直接加一个:hover的CSS属性就可以。

鼠标移过弹出导航菜单CSS+DIV代码,对弹出层做一个display:none,鼠标移过时设置属性display:block;

纯DIV+CSS弹出菜单

nmouseover="this.style.display='block';document.getElementById('3').className='curr';"去调用CSS样式

完整代码:

CSS:

.div{width:1000px;padding:50px 100px;margin:0 auto;}
.div .nav{width:1000px;margin:0 auto;}
.div .nav .display{width:120px;border:1px solid #FF5400;height:140px; position:absolute;margin-left:120px;background-color:#FFF;z-index:999;display:none;}
.div .nav .display .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .display .li a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .display .li a:hover{background-color:#33A600;color:#fff;}
.div .nav .list{width:120px;padding:0px;border:1px solid #e4e4e4;height:140px;}
.div .nav .list .curr{background-color:#FF5400;color:#fff;}
.div .nav .list .curr .li a{color:#fff;}
.div .nav .list .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .list .li:hover{background-color:#33A600;color:#fff;}
.div .nav .list .li a,.div .nav .list .lis a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .list .li a:hover{color:#fff;}
.div .nav .list .lis{width:120px;height:30px;line-height:30px;}

HTML:

<div class="div">
<div class="nav">
<div class="display" id="d1" onmouseover="this.style.display='block';document.getElementById('1').className='curr';" onmouseout="this.style.display='none';document.getElementById('1').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
</div>
<div class="display" id="d2" onmouseover="this.style.display='block';document.getElementById('2').className='curr';" onmouseout="this.style.display='none';document.getElementById('2').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
</div>
<div class="display" id="d3" onmouseover="this.style.display='block';document.getElementById('3').className='curr';" onmouseout="this.style.display='none';document.getElementById('3').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
</div>
<div class="display" id="d4" onmouseover="this.style.display='block';document.getElementById('4').className='curr';" onmouseout="this.style.display='none';document.getElementById('4').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
</div>
<div class="list">
<div id="1">
<div class="li"  id="l1" onmouseover="document.getElementById('d1').style.display='block';" onmouseout="document.getElementById('d1').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="2">
<div class="li"  id="l2" onmouseover="document.getElementById('d2').style.display='block';" onmouseout="document.getElementById('d2').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="3">
<div class="li"  id="l3" onmouseover="document.getElementById('d3').style.display='block';" onmouseout="document.getElementById('d3').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="4">
<div class="li"  id="l4" onmouseover="document.getElementById('d4').style.display='block';" onmouseout="document.getElementById('d4').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div>
</div>
</div>
</div>

声明:博客中如无特殊说明或标注的文章均为博客原创文章,部分文章来源互联网,如有侵犯您的版权,或者对零分博客发布的文章有异议,请来信告知删除、修改,如您有好的建议或者意见也可以来信,谢谢!

请TA喝杯水^_^ 如本文“对您有用”,欢迎随意打赏,让我们坚持创作! 请TA喝水