二级导航菜单

2023年2月18日 79次阅读 来源: Programmer_Dong

本文用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; }
    原文作者：Programmer_Dong
    原文地址: https://blog.csdn.net/qq_41343536/article/details/81295343
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞