左右菜单

2024-04-27 14:23:54

字体：大中小

来源：转载

供稿：网友

左右菜单

<!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 { text-align:center; position:relative; margin-bottom:5px;}

#navigation li ul li{text-align:center; position:relative; margin-bottom:0px;}

#navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:150px; height:80px; line-height:40px; padding-left:10px; }

#navigation li ul li a:link, #navigation li ul li a:visited { display:block; text-decoration:none; color:#000; width:150px; height:40px; line-height:40px; background:#c5dbf2; padding-left:10px; }

#navigation li a:hover { color:#fff; background:#2687eb; }

#navigation li ul li a:hover { color:#fff; background:#2687eb; }

#navigation li ul { display:none; position:absolute; top:0px; left:160px; margin-top:0; width:120px; } </style> <script type="text/Javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; li.style.background = "#c5dbf2";subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0];subMenu.style.display = "none"; li.style.background = "";} </script> </head> <body> <div style="width:200px; height:500px; background-color:red;"><ul id="navigation"> <li onmouSEOver="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#"><img src="http://www.jeasyui.com/images/logo1.png" style="width:50px;height:50px"><br/>栏目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>

上一篇：很平滑的淡入淡出效果，可以随意换背景(背景图片)，换图片

下一篇：Node.js入门

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注