教你如何做一个漂亮的下拉菜单导航.docVIP

教你如何做一个漂亮的下拉菜单导航 标签：惠州网站建设 下拉菜单 在本教程中我们将纯CSS 3代码纯制作导航菜单。 第一步 HTML 我们将创建一个列表项，并为每个菜单链接的锚标记无序列表。若要创建子菜单添加另一个无序列表内的名单。 ul class=menu lia href=/网站建设/a/li lia href=/网站制作/a/li lia href=/网站优化/a/li ul lia href=# class=documentsDocuments/a/li lia href=# class=messagesMessages/a/li lia href=# class=signoutSign Out/a/li /ul /li lia href=#Uploads/a/li lia href=#Videos/a/li lia href=#Documents/a/li/ul 第二步 菜单布局 我们先把菜单中的所有元素移除。然后，我们将增加一个固定的宽度和高度，圆角有CSS3梯度的菜单。为了让链接水平对齐，我们让列表左浮动。我们还需要设置它为相对位置，因为我们需要对齐子菜单。 .menu,.menu ul,.menu li,.menu a { margin: 0; padding: 0; border: none; outline: none;}.menu { height: 40px; width: 505px; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.menu li { position: relative; list-style: none; float: left; display: block; height: 40px;} 我们将暂时隐藏子菜单,以更容易的定义第一级菜单。 .menu ul { display: none; } 第三步 菜单链接 首先给菜单加一些基本的CSS样式如字体，颜色等，然后我们将添加一个黑暗的文字阴影和过渡色来创建一个悬停状态时颜色变化平滑的效果。加一个左边框和右边框来做链接分隔,去掉第一个和最后一个项的左边框和右边框。悬停状态效果，只需要改变字体颜色。 .menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-o