为了账号安全,请及时绑定邮箱和手机立即绑定

子菜单显示了,就不想隐藏了

标签:
JavaScript

今天有做一个小功能,就是mouse经过主菜单之后,子菜单就永久显示,除非刷新了网页。

先来看年实现的效果:

 

Html代码:


Source code:

<div id="top">            <div id="top_1">                <ul>                                       <li style="position:relative;">                        <a href="#" id="Menu1" style="text-decoration:none; color:white;">主菜名称</a>                        <ul id="SubMenu1" style="width: 300px; position: absolute; display: block;">                            <li><a href="#">子菜名称一</a></li>                            <li><a href="#">子菜名称二</a> | </li>                            <li><a href="#">子菜名称三</a> | </li>                            <li><a href="#">子菜名称四</a> | </li>                        </ul>                    </li>                </ul>            </div>        </div>

View Code


使用jQuery库:

 <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="~/Scripts/jquery-2.2.1.js"></script>


写js代码:


Source code:

 $(function () {            $("#SubMenu1").hide();                       $("#Menu1").mouseover(function () {                                showPublish();            });        });               function showPublish() {            $("#SubMenu1").show();        }

View Code


接下来是样式:


Style source code:

#top{    height: 36px;    width: 100%;            margin-right: auto;    margin-left: auto;    background-color: #006428;    line-height: 36px;    text-align: left;}#top #top_1{    height: 36px;    width: 1110px;      line-height: 36px;    margin-right: auto;    margin-left: auto;}#top #top_1 ul{    margin: 0px;    padding: 0px;    list-style-type: none;}#top #top_1 li{    display: block;    float: right;    width: auto;    line-height: 36px;    color: #FFFFFF;    height: 36px;    font-size: 14px;}

View Code

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消