纯 CSS 实现水平下拉菜单_html/css_WEB-ITnose

 

•     Menu 1

     

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 1-1

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 1-2

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 1-3

         

     

   

 

•     Menu 2

     

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 2-1

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 2-2

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 2-3

         

     

   

 

•     Menu 3

     

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 3-1

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 1-10

         

       

  • 立即学习“前端免费学习笔记（深入）”；

            Menu 1-11

         

     

   

#menu {

  font-family: Arial;

  font-size: 14px;

  width: 500px;

  overflow: hidden;

}

#menu, #menu ul {

  list-style-type: none;

  background: #A3C159;

  margin: 0;

  padding: 0;

}

#menu li {

  float: left;

}

#menu li a {

  display: block;

  padding: 10px 15px;

  color: #FFF;

  text-decoration: none;

  border-right: 1px solid #FFF;

}

#menu li a:hover {

  background: #1BA6B2;

}

#menu li ul li {

  float: none;

}

#menu li ul li a {

  border-top: 1px solid #FFF;

}

#menu li ul {

  display: none;

  position: absolute;

}

#menu li:hover ul {

  display: block;

}

备注：不支持 IE6。