|
第一種，如果要看演示，新建記事本，把下面代碼加進(jìn)去后保存，文件名改成 ：abc.htm,然后直接運(yùn)行就可以看了。
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="#">天涯首頁(yè)</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="#">網(wǎng)絡(luò)技術(shù)</a></div></div> <div class="mainmenu" onmouseover="submenu5.style.display='block'" onmouseout="submenu5.style.display='none'"> <div class="menucontent"><a href="#" title="#">愛(ài)在天涯</a></div></div> <div class="mainmenu" onmouseover="submenu6.style.display='block'" onmouseout="submenu6.style.display='none'"> <div class="menucontent"><a href="#" title="#">休閑娛樂(lè)</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="天涯首頁(yè)">天涯首頁(yè)</a></li> <li><a href="#" title="天涯首頁(yè)">天涯首頁(yè)</a></li> <li><a href="#" title="天涯首頁(yè)">天涯首頁(yè)</a></li> <li><a href="#" title="天涯首頁(yè)">天涯首頁(yè)</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="網(wǎng)絡(luò)技術(shù)">網(wǎng)絡(luò)技術(shù)</a></li> <li><a href="#" title="網(wǎng)絡(luò)技術(shù)">網(wǎng)絡(luò)技術(shù)</a></li> <li><a href="#" title="網(wǎng)絡(luò)技術(shù)">網(wǎng)絡(luò)技術(shù)</a></li> <li><a href="#" title="網(wǎng)絡(luò)技術(shù)">網(wǎng)絡(luò)技術(shù)</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="愛(ài)在天涯">愛(ài)在天涯</a></li> <li><a href="#" title="愛(ài)在天涯">愛(ài)在天涯</a></li> <li><a href="#" title="愛(ài)在天涯">愛(ài)在天涯</a></li> <li><a href="#" title="愛(ài)在天涯">愛(ài)在天涯</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="休閑娛樂(lè)">休閑娛樂(lè)</a></li> <li><a href="#" title="休閑娛樂(lè)">休閑娛樂(lè)</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> |
|
|
