如何利用CSS制作一个下拉菜单

1、设计导航及下拉菜单的HTML结构

<div class="header g-algin g-width">LOGO</div>

<div class="nav">
    <ul class="g-width g-algin">
        <li id="a"><a href="#a">首页</a></li>
        <li id="b"><a href="#b">公司简介</a>
            <div>
                <ul>
                    <li><a href="#b">发展历程</a></li>
                    <li><a href="#b">公司资质</a></li>
                    <li><a href="#b">组织结构</a></li>
                    <li><a href="#b">领导风采</a></li>
                </ul>
            </div>
        </li>
        <li id="c"><a href="#c">产品展示</a>
            <div>
                <ul>
                    <li><a href="#c">发展历程</a></li>
                    <li><a href="#c">公司资质</a></li>
                    <li><a href="#c">组织结构</a></li>
                    <li><a href="#c">领导风采</a></li>
                </ul>
            </div>
        </li>
        <!-- 省略中间的导航内容 -->
        <li id="k"><a href="#k">联系我们</a></li>
    </ul>
</div>

2、编写CSS的全局样式

*{

    margin:0;
    padding:0;
    font-size: 14px;
    box-sizing: border-box;
}
ul,li{
    list-style: none;
}
a{
    text-decoration: none;
    color:#000;
}

3、编写CSS的公共样式

.g-width{

    width: 1190px;
}
.g-algin{
    margin:0 auto;
}

4、定义顶部LOGO

div.header{  
    font-family: Arial;
    font-size:60px;
    font-weight: bold;
    border:1px solid #ccc;
    padding:10px 30px;
    margin-bottom: 1px;
}

5、定义导航外部的DIV样式

div.nav{
    height:45px;
    line-height: 45px;
    background: url(menu-bg.png) repeat-x;
}

6、将导航中用到的<li>横向显示

div.nav>ul>li{
    float:left;
    width:108px;    
}

7、子菜单默认不显示，当悬停到导航所属的<li>时子菜单显示

div.nav div{
    display: none;
}
div.nav>ul>li:hover div{
    display: block;
}

8、所有的<a>标签转为普通块，且让文字水平居中显示

div.nav a{
    display: block;
    text-align: center;
    transition: all 0.2s ease-in;
}

9、当悬停或点击某个一级导航时，背景变为黑色文字变为白色。菜单中的<a>标签也进行同样的设置

div.nav li:hover>a,div.nav li:target>a,div.nav div a{
    background: #000;
    color:#fff;
}

10、为菜单中最后一个<a>标签的“左下、右下”设置圆角

div.nav>ul ul li:last-child a{
    border-radius:0 0 5px 5px;
}

11、菜单悬停时，背景色变为红色

div.nav div a:hover{
    background:#f00;
}

12、利用同样的方法和原理，可以实现不同形式的子菜单效果，比如仿京东商城的菜单