html 横向导航栏制作求助

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 横向导航栏制作求助相关的知识,希望对你有一定的参考价值。

这种效果的二级菜单咋制作 就是鼠标移到图标那里 右边的菜单出来 谢谢各位
CSS的就可以 不用带图标

<!DOCTYPE html>
<html xmlns="
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style>
            .menu
            
                position: relative;
                width: 150px;
                height: 100px;
                background-color: #ccccff;
                text-align: center;
                font-size: 20px;
                color: #3366dd;
                line-height: 150px;
            
            .menu:hover .submenu
            
                display: block;
            
            .submenu
            
                position:absolute;
                display: none;
                box-shadow: 1px 1px .2em #666;
                width: 300px;
                left: 180px;
                top: 0;
            
            .submenu div
            
                text-align: center;
                height: 50px;
                line-height: 50px;
                background-color: #eeeeff;
            
            .submenu div a
            
                font-size: 20px;
                color: #666666;
                font-family: "microsoft yahei";
                text-decoration: none;
            
        </style>
    </head>
    <body>
        <div class="menu">
            <span>申报活动</span>
            <div class="submenu">
                <div><a href="#">申报社会实践活动</a></div>
                <div><a href="#">申报志愿服务活动</a></div>
            </div>
        </div>
    </body>
</html>

参考技术A 我帮你看看呢 或许可以帮到你呢 CSS JS追问

随便写个可以吗 不用带图标的 谢谢 CSS的

追答

嗯 好的 我试试 过来拿给你

做好了的!给你吧

追问

怎么给

以上是关于html 横向导航栏制作求助的主要内容,如果未能解决你的问题,请参考以下文章

css中导航栏子菜单横向下拉改为水平下拉

tab导航栏横向滚动条-tabScroll

html css 求助大神:导航栏菜单问题,二级菜单内容会遮盖掉后面的一级菜单栏选项。

关于网页导航栏制作的几种方法与常见问题解决(新人向)

PHP全栈开发:CSS Ⅹ 导航栏制作

导航栏切换器仅在纵向,而不是横向移动