H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）

最新推荐文章于 2024-04-16 09:27:13 发布

folling*

最新推荐文章于 2024-04-16 09:27:13 发布

阅读量3.1k

点赞数 2

分类专栏：前端开发文章标签： html5 css3

本文链接：https://blog.csdn.net/Xiaofugongzi/article/details/104717856

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用H5和CSS实现三级菜单以及基本网页架构。
代码如下，仅供参考：

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS实现三级菜单</title>
</head>
<style>
    *{padding:0;margin:0;}
    header{width:100%;height:100px;background-color: cyan;}
    .one{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    .two{width:33%;height:100px;background-color: coral;float:left;margin-right: 6px;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    .three{width:33%;height:100px;background-color: coral;float:right;
        margin-bottom: 5px;border-bottom: 1px solid #234567;}
    footer{width:100%;height:200px;background-color: cyan;margin-top: 418px;}
    nav{margin-left: 170px;
        position: absolute;top:58px;}
    a{text-decoration: none;display: block;font-weight: bold;
        line-height: 40px;height:40px;text-align: center;padding:0px 10px;
        border-right: solid 1px #fff;background-color: darkgoldenrod;
        color:#fff;
         }
    ul li a:hover{background: crimson;}/*一级菜单背景色*/
    ul li{float:left;list-style: none;position:relative;}
    ul li ul{position:absolute;display: none;}
    ul li:hover ul{display:block;}/*当鼠标放到一级菜单上，二级菜单显示*/
    ul li ul li{float:none;width:90px;top:1px;}
    ul li ul li a{border-right: none;margin-top: 1px;}
    ul li ul li a:hover{background: darkblue;}/*二级菜单背景色*/
    ul li ul li ul li a:hover{background: black;}/*三级菜单背景色*/
    ul li:hover ul li ul{display:none;}/*当鼠标放在一级菜单的上面，三级菜单不显示*/
    ul li ul li ul li a{margin-left:90px;width:70px;}
    ul li ul li:hover ul{display:block;}/*当鼠标放在二级菜单的上面，三级菜单显示*/
    ul li ul li ul{position:absolute;display: none;}
    ul li ul li ul li{top:-41px;margin-left: 1px;}
    .ones{margin-bottom: 10px;}
</style>
<body>
<header>
    <nav>
        <ul>
            <li><a href="#">消息中心</a></li>
            <li><a href="#">联系人</a>
                <ul>
                    <li><a href="#">我的好友</a></li>
                    <li><a href="#">我的分组</a></li>
                    <li><a href="#">我的群聊</a>
                    <ul>
                        <li><a>家人群</a></li>
                        <li><a>同学群</a></li>
                        <li><a>好友群</a></li>
                        <li><a>陌生人群</a></li>
                    </ul>
                    </li>
                    <li><a href="#">我的设备</a></li>
                </ul>
            </li>
            <li><a href="#">新闻看点</a></li>
            <li><a href="#">好友动态</a></li>
            <li><a href="#">关于自己</a></li>
        </ul>
    </nav>
</header>
<section class="ones">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="twos">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="threes">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<section class="fours">
    <article class="one"></article>
    <article class="two"></article>
    <article class="three"></article>
</section>
<footer></footer>
</body>
</html>

folling*

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5+CSS实现三级菜单（包括水平、垂直菜单和网页架构）

用H5和CSS实现三级菜单以及基本网页架构。代码如下，仅供参考：在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实现三级菜单</title></head><style&g...
复制链接

扫一扫