完成效果
html代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赶快回家网</title>
<link rel="stylesheet" href="style.css">
<script src="data.js"></script>
</head>
<body>
<div id="container">
<div class="header" id="top">
<div class="sider-bar">
<div class="left">
<span><a href="#">登录</a></span>
<span><a href="#">免费注册</a></span>
</div>
<div class="right">
<ul>
<li onmouseover="cross('catalog','block')" onmouseout="cross('catalog','none')"
><a>个人中心</a> |
<div id="catalog">
<a href="#">已完成订单</a>
<a href="#">未完成订单</a>
<a href="#">我的保险</a>
<a href="#">账户安全</a>
<a href="#">个人信息</a>
<a href="#">常用联系人</a>
</div>
</li>
<li onmouseover="cross('catalog1','block')" onmouseout="cross('catalog1','none')"
><a>使用须知</a> |
<div id="catalog1">
<a href="#">已完成订单</a>
<a href="#">未完成订单</a>
<a href="#">我的保险</a>
<a href="#">账户安全</a>
<a href="#">个人信息</a>
<a href="#">常用联系人</a>
</div>
</li>
<li onmouseover="cross('catalog2','block')" onmouseout="cross('catalog2','none')"
><a>收藏夹</a> |
<div id="catalog2">
<a href="#">已完成订单</a>
<a href