二级导航菜单[通俗易懂]

全栈程序员站长

发布于 2022-09-19 11:18:50

5.2K01

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：1

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

本文用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; }