PHP网站导航栏下拉菜单代码,如何使用CSS3实现导航下拉菜单（附完整代码）

在当下网页结构当中，导航的菜单栏占据了一个很重要的位置，因为不仅仅可以展示示例，还可以给你对于内容最直观的印象，众所周知的是在html中

使用css3实现导航下拉菜单的原理

首先要使用HTML当中的

使用css3实现导航下拉菜单的步骤

步骤一：利用HTML制作出菜单样式

• 导航一
  • 二级导航
  • 二级导航
  • 二级导航
  • 二级导航
• 导航二
• 导航三
  • 二级导航
  • 二级导航
  • 二级导航
    • 三级导航
    • 三级导航
    • 三级导航
  • 二级导航
• 导航四
  • 二级导航
  • 二级导航
  • 二级导航
• 导航五
  • 二级导航
  • 二级导航
• 导航六

步骤二：利用css3实现鼠标悬停触发的下拉菜单nav {

margin:100px auto;

text-align:center;

}

nav ul {

border-radius:10px;

background:linear-gradient(to bottom,#efefef,#bbbbbb);

padding:0 20px;

display:inline-table;

position:relative;

box-shadow:1px 1px 3px #666;

}

nav ul ul {

display:none;

}

nav ul li {

float:left;

}

nav ul::after {

content:"";

display:block;

clear:both;

}

nav ul li a {

display:block;

padding:25px 40px;

color:#000;

text-decoration:none;

font-family:"微软雅黑";

}

nav ul li:hover > ul {

display:block;

}

nav ul li:hover {

background:linear-gradient(to bottom,#4f5964,#5f6975);

}

nav ul li:hover a {

color:#FFF;

}

nav ul ul {

background:#5f6975;

border-radius:0;

position:absolute;

top:100%;

padding:0;

}

nav ul ul li {

float:none;

border-top:1px solid #6b727c;

border-bottom:1px solid #575f6a;

}

nav ul ul li a {

color:#FFF;

}

nav ul ul li a:hover {

background:#4b545f;

}

nav ul ul ul {

width:100%;

position:absolute;

left:100%;

top:50%;

}

步骤三：根据菜单样式的要求进行美化

下拉菜单样式如图所示