JS CSS写下拉菜单 竖行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one li { width: 100px; height: 30px; line-height: 30px; background: url(nav/libg.jpg) no-repeat; //float: left; text-align: center; margin-left: 10px; cursor: pointer; _display: inline; position: relative; } li ul { position: absolute; left: 0; top: 30px; display: none; } .cd{ margin-top: -30px; margin-left: 65px; } li{ list-style: none; } </style> </head> <body> <ul class="one"> <li id="li01"> <span>一级菜单</span> <ul id="ul01"class="cd" > <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li id="li02"> <span>一级菜单</span> <ul id="ul02" class="cd" > <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li id="li03"> <span >一级菜单</span> <ul id="ul03"class="cd" > <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> <script> function fn(canshu1,canshu2){ var li01 = document.getElementById(canshu1); var ul01 = document.getElementById(canshu2); li01.onmouseover = function(){ ul01.style.display = "block" } li01.onmouseout = function(){ ul01.style.display = "none" } } fn("li01","ul01") fn("li02","ul02") fn("li03","ul03") </script> </body> </html>