如何利用CSS制作一个下拉菜单
的有关信息介绍如下：
下拉菜单是web开发中很常见的一种效果，今天给大家分享一个不用JavaScript而是使用纯HTML+CSS就能实现的下拉菜单效果，喜欢的可以收藏起来。
设计导航及下拉菜单的HTML结构
编写CSS的全局样式
*{ margin:0; padding:0; font-size: 14px; box-sizing: border-box;}ul,li{ list-style: none;}a{ text-decoration: none; color:#000;}
编写CSS的公共样式
.g-width{ width: 1190px;}.g-algin{ margin:0 auto;}
定义顶部LOGOdiv.header{ font-family: Arial; font-size:60px; font-weight: bold; border:1px solid #ccc; padding:10px 30px; margin-bottom: 1px;}
定义导航外部的DIV样式div.nav{ height:45px; line-height: 45px; background: url(menu-bg.png) repeat-x;}
将导航中用到的
子菜单默认不显示，当悬停到导航所属的
所有的标签转为普通块，且让文字水平居中显示div.nav a{ display: block; text-align: center; transition: all 0.2s ease-in;}
当悬停或点击某个一级导航时，背景变为黑色文字变为白色。菜单中的标签也进行同样的设置div.nav li:hover>a,div.nav li:target>a,div.nav div a{ background: #000; color:#fff;}
为菜单中最后一个标签的“左下、右下”设置圆角div.nav>ul ul li:last-child a{ border-radius:0 0 5px 5px;}
菜单悬停时，背景色变为红色div.nav div a:hover{ background:#f00;}
利用同样的方法和原理，可以实现不同形式的子菜单效果，比如仿京东商城的菜单
