CSS下拉菜单制作方法

在网站制作中，首先要做的就是主页的导航栏，导航栏一般都会用到下拉菜单，用来筛选子单元。下面是用CSS3的方法制导航栏的下拉菜单：

首先设置一个DIV top-container作为导航栏，再在里边放一个DIV top-nav用来放主导航，然后再设置4个div nav-btn-lv1

放一级菜单，每个一级菜单下边放无序列表产生子菜单：

<div class="top-container">
            <div class="top-nav">
                <div class="nav-btn-lv1">导航1
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        <li>导航D</li>
                    </ul>
                </div>
                <div class="nav-btn-lv1">导航2
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>
                        <li>导航D</li>
                    </ul>
                </div>
                <div class="nav-btn-lv1">导航3
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>
                        <li>导航C</li>

                    </ul>
                </div>
                <div class="nav-btn-lv1">导航4
                    <ul>
                        <li>导航A</li>
                        <li>导航B</li>

                    </ul>
                </div>
            </div>
        </div>

然后就是对div进行样式表的设置以及特效动画，首先将全部样式的外边距及内边距设为0，并将列表前边的标志去掉。字体选择微软雅黑，带阴影效果

* {
                margin: 0px;
                padding: 0px;
                list-style: none;
                font-family: "微软雅黑";
                text-shadow: #0000FF 5px 5px;
                
            }

然后分别设置top-container和top-nav的宽高和背景色（为了分辨出div），将top-nav居中

.top-container {
                width: 100%;
                height: 40px;
                background-color: #66AFE9;
            }
            
            .top-nav {
                width: 600px;
                height: 40px;
                margin: 0px auto;
                background-color: chartreuse;
            }

然后再设置nav-btn-lv1的宽和最大高度，流布局，水平及垂直居中（用行高），超出部分隐藏（overflow）。

.nav-btn-lv1 {
                width: 150px;
                max-height: 40px;
                background-color: burlywood;
                float: left;
                text-align: center;
                /*行高*/
                line-height: 40px;
                overflow: hidden;
            }

然后设置nav-btn-lv1的鼠标点击特效（过渡效果及小手特效）

.nav-btn-lv1:hover{
                /*最大高度*/
                max-height: 400px;
                /*过渡效果*/
                transition: 1s;
                /*鼠标小手*/
                cursor: pointer;                
            }

再给列表加背景及下划线

.nav-btn-lv1 li:hover{
                background-color: yellow;
                text-decoration: underline;
            }

最后是让列表实线透明效果并且使导航栏呈现圆角：

}
            .nav-btn-lv1 ul{
                opacity: 0.5;
            }
            .top-nav,.nav-btn-lv1{
                border-radius: 10px;
            }

CSS下拉菜单制作方法

推荐阅读