二级导航菜单

编程小号 • 2024-01-16 09:46 • 未分类

本文用html5+css实现了二级导航菜单，二级导航菜单在网站建设中使用的越来越广泛。
效果图如下：

当鼠标悬停在一级菜单上时，出现二级下拉菜单

二级下拉菜单可以被选中，当鼠标悬停上去时，变色。

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="main">
          <ul id="list">
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单五</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </body>
</html>

css代码

          *{ padding: 0px; margin: 0px; }
            #main{ overflow: auto; text-align: center; }

            a{ text-decoration: none; display: inline-block; height: 40px; width: 100px; color: white; background-color: darkgray; /*border: 1px solid red; box-sizing: border-box;*/ line-height: 40px; }
            ul{ list-style: none; }

            #list{ display: inline-block; margin: 0px; padding: 0px; vertical-align: bottom; }

            #list>li{ float: left; }

            #list>li>ul{ display: none; position: absolute; }

            #list>li:hover ul{ display: block; }

            a:hover { background-color: burlywood; }

今天的文章二级导航菜单分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/5108.html

二级导航菜单

相关推荐

发表回复