第一种,如果要看演示,新建记事本,把下面代码加进去后保存,文件名改成 :abc.htm,然后直接运行就可以看了。
Copy code<style type="text/css"> 第二种: [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www./1999/xhtml" target="_blank">http://www./1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title><a href="http://blog." target="_blank">天涯博客</a>纯CSS弹出菜单</title> <style type="text/css"> <!-- body{ margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; background:#fff; text-align:center; color: #333; font-family:arial,verdana,sans-serif; } #topbanner{ margin-left:auto; margin-right:auto; width:580px; height:40px; border-bottom:5px solid #ff9900; } #bottom{ margin-left:auto; margin-right:auto; width:580px; height:40px; border-top:5px solid #ff9900; } /*菜单样式定义*/ #menu{ clear:both; margin-right: auto; margin-left: auto; width:580px; height:24px; color:#fff; background-color:#900; } /*主菜单样式定义*/ .mainmenu{ float:left; width:64px; font-size:13px; color:#fff; border-left:1px solid #999; } .menucontent{ float:left; width:80px; height:20px; color:#fff; padding-top:4px; } .menucontent a:link { color: #fff; display:block; text-decoration: none; } .menucontent a:visited { color: #fff; display:block; text-decoration: none; } .menucontent a:hover { color: #fff; text-decoration: none; background-color:#000; } /*子菜单样式定义*/ .submenu{ clear:both; float:left; position:absolute; width:80px; padding:0px; font-size:13px; } .submenu ul { background-color:#eee; list-style-type:none; width:82px; line-height:24px; } .submenu li { border-bottom: #ccc 1px dotted; } .submenu li a:link,a:visited { color: #333; display: block; text-decoration: none; } .submenu li a:hover { color: #fff; text-decoration: none; background-color:#900; border-top:1px solid #fff; } --> </style> </head> <body> <div id="topbanner"></div> <div id="menu"> <div class="mainmenu" onmouseover="submenu1.style.display='block'" onmouseout="submenu1.style.display='none'"> <div class="menucontent"><a href="#" title="#">天涯首页</a></div></div> <div class="mainmenu" onmouseover="submenu2.style.display='block'" onmouseout="submenu2.style.display='none'"> <div class="menucontent"><a href="#" title="#">天涯日志</a></div></div> <div class="mainmenu" onmouseover="submenu3.style.display='block'" onmouseout="submenu3.style.display='none'"> <div class="menucontent"><a href="#" title="#">电子通信</a></div></div> <div class="mainmenu" onmouseover="submenu4.style.display='block'" onmouseout="submenu4.style.display='none'"> <div class="menucontent"><a href="#" title="#">网络技术</a></div></div> <div class="mainmenu" onmouseover="submenu5.style.display='block'" onmouseout="submenu5.style.display='none'"> <div class="menucontent"><a href="#" title="#">爱在天涯</a></div></div> <div class="mainmenu" onmouseover="submenu6.style.display='block'" onmouseout="submenu6.style.display='none'"> <div class="menucontent"><a href="#" title="#">休闲娱乐</a></div></div> <div class="mainmenu" onmouseover="submenu7.style.display='block'" onmouseout="submenu7.style.display='none'"> <div class="menucontent"><a href="#" title="#">电脑资讯</a></div></div> </div> <div class="submenu" style="display:none;margin-left:-40px;" onmouseover="submenu1.style.display='block'" onmouseout="submenu1.style.display='none'" id="submenu1"> <ul> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:41px;" onmouseover="submenu2.style.display='block'" onmouseout="submenu2.style.display='none'" id="submenu2"> <ul> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:122px;" onmouseover="submenu3.style.display='block'" onmouseout="submenu3.style.display='none'" id="submenu3"> <ul> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:203px;" onmouseover="submenu4.style.display='block'" onmouseout="submenu4.style.display='none'" id="submenu4"> <ul> <li><a href="#" title="网络技术">网络技术</a></li> <li><a href="#" title="网络技术">网络技术</a></li> <li><a href="#" title="网络技术">网络技术</a></li> <li><a href="#" title="网络技术">网络技术</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:284px;" onmouseover="submenu5.style.display='block'" onmouseout="submenu5.style.display='none'" id="submenu5"> <ul> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:365px;" onmouseover="submenu6.style.display='block'" onmouseout="submenu6.style.display='none'" id="submenu6"> <ul> <li><a href="#" title="休闲娱乐">休闲娱乐</a></li> <li><a href="#" title="休闲娱乐">休闲娱乐</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:446px;" onmouseover="submenu7.style.display='block'" onmouseout="submenu7.style.display='none'" id="submenu7"> <ul> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> </ul> </div> <div id="bottom"></div> </body> </html> |
|