<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>菜单栏测试 - XMCC</title>
<link rel="shortcut icon" href="/ico/favicon.ico">
<link href="https://xmcc.cn/xm/js/caidan/css/css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/common.min.css">
<link rel="stylesheet" href="https://xmcc.cn/xm/js/caidan/css/okayNav.min.css">
</head>
<body>
<header id="header" class="okayNav-header">
<!-- 暂时不用<a class="okayNav-header__logo" href="#"> -->
<img src='https://xmcc.cn/ico/xmcc-logo-w.png' width='20%'>
<!-- </a> -->
<nav role="navigation" id="nav-main" class="okayNav">
<ul>
<li><a href="/" target="_blank">首页</a></li>
<li><a href="http://xmcc.cn/xm/home/" target="_blank">关于我们</a></li>
<li><a href="http://xmcc.cn/xm/guanzhu/weibo/" target="_blank">关注我们</a></li>
<li><a href="http://xmcc.cn/xm/zhifu/" target="_blank">云支付</a></li>
<li><a href="http://xmcc.cn/xm/gongju/shipin/" target="_blank">云视频</a></li>
<li><a href="http://xmcc.cn/xm/kaifa/" target="_blank">开发者</a></li>
<li><a href="http://xmcc.cn/xm/gongju/rili/" target="_blank">万年历</a></li>
<li><a href="http://xmcc.cn/xm/guanzhu/youxiang/" target="_blank">技术支持</a></li>
</ul>
</nav>
</header><!-- /header -->
<main>
<!-- 内容栏 -->
<script type="text/javascript" src="nr.js"></script>
<!-- 内容栏 -->
</main>
<script src="https://xmcc.cn/xm/js/caidan/js/jquery-2.2.3.min.js"></script>
<script src="https://xmcc.cn/xm/js/caidan/js/jquery.okayNav-min.js"></script>
<script type="text/javascript">
var navigation = $('#nav-main').okayNav();
</script>
</body>
<!-- 固定底部版权栏 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
padding-bottom: 50px;
}
.footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%; '宽度定位'
height: 25px; '高度定位'
text-align: center;
background-color: #fff; '版权底部颜色'
z-index: 9999;
}
</style>
</head>
<body>
<div class="footer">
<!-- 引用动态版权信息 -->
<style type="text/css">
#footer {
text-align: center;
}
</style>
<div id="footer">
</div>
<script type="text/javascript" src="https://xmcc.cn/xm/js/Copyright.js"></script>
<!-- 引用动态版权信息 -->
</div>
</body>
<!-- 固定底部版权栏 -->
</html>
参考这个https://blog.csdn.net/lihuihui2016/article/details/88096219 利用hover来显示与隐藏