Document.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用文档</title>
    <style>
        #leftMenu ul{width:200px;position:absolute;background:#DADADA;list-style:none;}
        #leftMenu li{width:200px;position: relative;}
        #leftMenu li>ul{left: 100px;top: 0;display: none;}
        #leftMenu li:hover>ul{display: block;}
    </style>
</head>
<body>
    <div style="position: relative;float:right;right:100px;width:800px;">
        <p>Athandia Intro</p><br>
        <p>Athandia online experiment platform is an website aiming to help students conduct experiments, write projects and receive instant comments from guide teachers without meeting. It has a reliable connection with wilddog database where students could instantly upload their experiments progress. By using mind map, students could gain logical examples and flow guiding the procedure of conducting projects. A timeline showing the deadline of task and the progress of experiment could be a reminder for the students. In the meantime, advisors could instantly give suggestions to certain projects to accomplish remote instruction</p><br>
        <P>This document is a guide for students and advisors learn how to develop, manage, and discuss their own projects through jsmind.</P><br>
        <p>For students, click 'Guide For Students' to learn how to create and edit projects</p><br>
        <p>For advisors, click 'Guide For Advisors' to learn how to search for projects and give advises</p>
    </div>
    <div id="leftMenu">
        <ul>
        	<li><a href="Document.html">Athandia Introduction</a></li>
            <li><a href="#">Guide For Students</a>
                <ul>
                    <li><a href="personalinfoduide.html">Edit Personal Info</a></li>
                    <li><a href="#">Edit Projects</a></li>
                </ul>
            </li>
            <li><a href="guideforadvisors.html">Guide For Advisors</a>
                <ul>
                    <li><a href="guideforadvisors.html">Identity Verification</a></li>
                    <li><a href="guideforadvisors.html">Search Projects</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>