javascript下拉菜单 博客分类: web JavaScriptXHTMLCSSHTML
程序员文章站
2024-02-21 19:45:10
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>JavaScript下拉菜单</title> <style type="text/css"> * { padding: 0; margin: 0; } body { font-family: verdana, sans-serif; font-size: small; } #navigation,#navigation li ul { list-style-type: none; } #navigation { margin: 20px; } #navigation li { float: left; text-align: center; position: relative; } #navigation li a:link,#navigation li a:visited { display: block; text-decoration: none; color: #000; width: 120px; height: 40px; line-height: 40px; border: 1px solid #fff; border-width: 1px 1px 0 0; background: #c5dbf2; padding-left: 10px; } #navigation li a:hover { color: #fff; background: #2687eb; } #navigation li ul li a:hover { color: #fff; background: #6b839c; } #navigation li ul { display: none; position: absolute; top: 40px; left: 0; margin-top: 1px; width: 120px; } #navigation li ul li ul { display: none; position: absolute; top: 0px; left: 130px; margin-top: 0; margin-left: 1px; width: 120px; } </style> <script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <ul id="navigation"> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目1</a> <ul> <li><a href="#">栏目1->菜单1</a></li> <li><a href="#">栏目1->菜单2</a></li> <li><a href="#">栏目1->菜单3</a></li> <li><a href="#">栏目1->菜单4</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目2</a> <ul> <li><a href="#">栏目2->菜单1</a></li> <li><a href="#">栏目2->菜单2</a></li> <li><a href="#">栏目2->菜单3</a></li> <li><a href="#">栏目2->菜单4</a></li> <li><a href="#">栏目2->菜单5</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3</a> <ul> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单1</a> <ul> <li><a href="#">菜单1->子菜单1</a></li> <li><a href="#">菜单1->子菜单2</a></li> <li><a href="#">菜单1->子菜单3</a></li> <li><a href="#">菜单1->子菜单4</a></li> </ul> </li> <li><a href="#">栏目3->菜单2</a></li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单3</a> <ul> <li><a href="#">菜单3->子菜单1</a></li> <li><a href="#">菜单3->子菜单2</a></li> <li><a href="#">菜单3->子菜单3</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
推荐阅读
-
javascript下拉菜单 博客分类: web JavaScriptXHTMLCSSHTML
-
Java Pet Store 开始全面使用 Web 2.0 技术 博客分类: BlogJava JavaWebJavaEENetbeansAjax
-
Google发布AJAX开发工具 Google Web Toolkit 博客分类: BlogJava GoogleWebAjaxGWTJavaScript
-
35 个你也许不知道的 Google 开源项目 博客分类: 默认类别 Google项目管理Chrome应用服务器JavaScript
-
Google发布AJAX开发工具 Google Web Toolkit 博客分类: BlogJava GoogleWebAjaxGWTJavaScript
-
35 个你也许不知道的 Google 开源项目 博客分类: 默认类别 Google项目管理Chrome应用服务器JavaScript
-
web.xml配置error code 在ie下无法打开的问题解决 博客分类: JavaEE IEWebXMLJSFBlog
-
java web开发,bean数据放在request、response还是servletcontext中? 博客分类: 技术及貌似 BeanWebJava应用服务器JVM
-
利用jetty实现超轻量级web开发 博客分类: java WebTomcatIDEEclipseOffice
-
javascript下拉菜单 博客分类: web JavaScriptXHTMLCSSHTML