html怎么实现二级菜单,用css如何实现二级菜单的显示？还是用的JS实现？

我给你写了两种实现方式,一种是 css, 一种是 js, 你参考一下html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

动画菜单

* {

margin: 0;

padding: 0;

font-size: 14px;

}

a {

color: #333;

text-decoration: none

}

ul {

list-style: none;

}

.nav {

height: 30px;

border-bottom: 5px solid #F60;

margin-left: 50px;

width: 600px;

}

.nav li {

float: left;

position: relative;

height: 30px;

width: 120px

}

.nav li a {

display: block;

height: 30px;

text-align: center;

line-height: 30px;

width: 120px;

background: #efefef;

margin-left: 1px;

}

.subNav {

position: absolute;

top: 30px;

left: 0;

width: 120px;

height: 0;

display: none;

}

.subNav li a {

background: #ddd

}

.subNav li a:hover {

background: #efefef

}

/*这是 css 样式*/

.lis:hover>.subNav{

display: block;

}

//下面是 js, 也能实现

//          window.onload = function() {

             var aLi = document.getElementsByTagName("li");

//              var aLi = document.getElementsByClassName('lis');

//              for (var i = 0; i 

//                  //记录 aLi 的下标

//                  aLi[i].index = i;

//                  aLi[i].onmouseenter = function() {

//                      //鼠标经过一级菜单，二级菜单动画下拉显示出来

                      var aUl = aLi[i].getElementsByTagName("ul")[0];

//                      var aUl = aLi[this.index].getElementsByClassName('subNav')[0];

//                      aUl.style.display = "block";

//                  }

//                  aLi[i].onmouseout = function() {

//                      //鼠标离开菜单，二级菜单动画收缩起来

                      var aUl = aLi[i].getElementsByTagName("ul")[0];

//                      var aUl = aLi[this.index].getElementsByClassName('subNav')[0];

//                      aUl.style.display = "none";

//                  }

//              }

//          }

• 一级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
• 一级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
  • 二级菜单
• 一级菜单
• 一级菜单
• 一级菜单

望采纳!