首页(downLink.html )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮菜单css实现</title>
    <link rel="stylesheet" href="css/downLink.css">
</head>
<body>
    <header>
        <nav>
            <ul id="uhead">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">学校概况</a>
                    <div class="hulsty">
                        <a href="">图书馆</a>
                        <a href="">学院介绍</a>
                        <a href="">校外联系</a>
                    </div>
                </li>
                <li>
                    <a href="#">组织机构</a>
                    <div class="hulsty">
                        <a href="">图书馆</a>
                        <a href="">学院介绍</a>
                        <a href="">校外联系</a>
                    </div>
                </li>
                <li>
                    <a href="#">人事管理</a>
                    <div class="hulsty">
                        <a href="">图书馆</a>
                        <a href="">学院介绍</a>
                        <a href="">校外联系</a>
                    </div>
                </li>
                <li>
                    <a href="#">奖励政策</a>
                    <div class="hulsty">
                        <a href="">图书馆</a>
                        <a href="">学院介绍</a>
                        <a href="">校外联系</a>
                    </div>
                </li>
            </ul>
        </nav>
    </header>
    <div id="content">
        <p>作为一名教育和保健护理工作者，我曾经和数不清的感染上艾滋病病毒的孩子打过交道。<br>和这些特殊的孩子之间的关系是生活赋予的恩赐.他们教会我许多东西.<br>我尤其懂得了即使在最弱小的人物身上也能发现其所蕴含的巨大勇气.让我告诉你泰勒的故事.</p>

    </div>
</body>
</html>

CSS样式(css/downLink.css)

*{
    padding:0px;
    margin:0px;
}
body{
    width:100%;
    min-width:900px;
    background-color:#E3EED7;
}
nav{
    float: right;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
}
a:hover{
    color: red;
}
header{
    width:100%;
    height:45px;
    background-color: gray;
}
#uhead>li{
    line-height:45px;
    float: left;
    height:45px;
    width:150px;
}
#uhead>li>a{
    display: block;
    text-align: center;
}
#uhead>li:hover .hulsty{
    visibility: visible;
    background-color:#666;
    opacity:0.90;
}
.hulsty a{
    display: block;
    text-align: center;
}
.hulsty{
    visibility: hidden;
}
#content{
    position: absolute;
    top:45px;
    z-index:1;
    width:100%;
    min-width:900px;
    height:800px;
    background:url("http://img.hb.aicdn.com/c2c82cbb6fd06228b88226864b38d15afc2ecb7f6965-L7qGmI_fw658");
    background-repeat: no-repeat;
    background-size:100%;
}
#content p{
    line-height:20px;
    text-align: center;
}

实现效果

导航多级下拉菜单_html