欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > 前端web

前端web

2025/2/24 11:40:30 来源:https://blog.csdn.net/w283065/article/details/143719575  浏览:    关键词:前端web

题目:制作带有下拉悬停菜单的导航栏

效果图

一、先制作标签

<body>
        <div id="menu">
            <div id="container">
                <div class="item">游戏1
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏社交</div>
                        <div>游戏论坛</div>
                        <div>游戏bug</div>
                    </div>
             
                </div>
                <div class="item">游戏2
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏社交</div>
                        <div>游戏bug</div>
                        <div>游戏论坛</div>
                    </div>
                </div>
                <div class="item">游戏3
                    <div class="down_menu">
                        <div>游戏下载</div>
                        <div>游戏交易</div>
                        <div>游戏外挂</div>
                        <div>游戏攻略</div>
                    </div>
                </div>
                <div class="item">游戏4</div>
                <div class="item">游戏5</div>
                <div class="item">游戏6</div>
                <div class="item">游戏7</div>
            </div>
        </div>

二、使用浮动属性让块标签处在同一行

.item {
     
                float: left;
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;——字体置中
                color: antiquewhite;——字体颜色
                position: relative;
            }
        

三、设置标签块底色并置顶

        * {
                margin: 0;
                padding: 0;
            }
        
            #menu {
                background-color: aqua;
                width: 100%;
                height: 50px;
            }

    .item:hover {
                background-color: royalblue;——当鼠标悬浮时底色变换
            }

四、悬浮框的设置

.down_menu>div {
                color: black;——悬浮框里的字体颜色
            }

            .down_menu {
                background-color: #cccccc;——悬浮框的底色
                display: none;
                position: absolute;
            }

            .item:hover>.down_menu {   
                display: block;————————悬浮框的大小设置
                width: 100px;
                left: 0px;
                top: 50px;
            }

五、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;/* border: 1px solid red; */}#menu {background-color: aqua;width: 100%;height: 50px;}.item {/* 浮动属性可以让块标签,处在同一行 */float: left;width: 100px;height: 50px;line-height: 50px;/* border: 1px solid red; */text-align: center;color: antiquewhite;position: relative;}.item:hover {background-color: royalblue;}#container {width: 720px;margin: auto;}.down_menu>div {color: black;}.down_menu {background-color: #cccccc;display: none;position: absolute;}.item:hover>.down_menu {display: block;width: 100px;left: 0px;top: 50px;}</style></head><body><div id="menu"><div id="container"><div class="item">游戏1<div class="down_menu"><div>游戏下载</div><div>游戏社交</div><div>游戏论坛</div><div>游戏bug</div></div><!-- <div style="width: 100px;height: 100px;background-color: black;"></div> --></div><div class="item">游戏2<div class="down_menu"><div>游戏下载</div><div>游戏社交</div><div>游戏bug</div><div>游戏论坛</div></div></div><div class="item">游戏3<div class="down_menu"><div>游戏下载</div><div>游戏交易</div><div>游戏外挂</div><div>游戏攻略</div></div></div><div class="item">游戏4</div><div class="item">游戏5</div><div class="item">游戏6</div><div class="item">游戏7</div></div></div></body>
</html>

效果图

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词