今天有做一个小功能，就是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