导航多级下拉菜单

最新推荐文章于 2022-05-26 15:30:30 发布

lsh呵呵

最新推荐文章于 2022-05-26 15:30:30 发布

阅读量690

点赞数 1

分类专栏：编程基础文章标签： css html

≧◔◡◔≦ 如觉得有所帮助，请点个✌赞或关注✌。转载请注明出处。 ≧◔◡◔≦

本文链接：https://blog.csdn.net/nima1994/article/details/50997493

版权

编程基础专栏收录该内容

94 篇文章 0 订阅

订阅专栏

首页(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;
}