<p class="sycode"> </p> <p class="sycode"> 第一种，如果要看演示，新建记事本，把下面代码加进去后保存，文件名改成 ：abc.htm,然后直接运行就可以看了。 <br> Copy code <style type="text/css"> <br>#nav{ <br>height: 44px; <br>width: 600px; <br>background: #FFF; <br>} <br>.vline{ <br>background: #999; <br>width: 1px; <br>height: 20px; <br>} <br>#nav ul{ <br>margin:0px; <br>padding: 0px; <br>list-style-type: none; <br>} <br>#nav li{ <br>float: left; <br>font-family: Arial; <br>font-weight: bold; <br>font-size: 12px; <br>text-align: center; <br>} <br>#nav li a{ <br>display: block; <br>width: 84px; <br>line-height: 28px; <br>color: #666; <br>text-decoration: none; <br>border-top: 4px solid #0F35A5; <br>} <br>#nav li a:hover{ <br>color: #7C8DD9; <br>border-top: 4px solid #7C8DD9; <br>} <br></style> <br><div id="nav"><ul><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <br></ul></div> <br> <br> <br> <br>第二种： <br> <br>[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href=" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <br><html xmlns="<a href=" http://www.w3.org/1999/xhtml" target="_blank"> http://www.w3.org/1999/xhtml</a>"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title><a href=" http://blog.h3bbs.com" target="_blank">天涯博客</a>纯CSS弹出菜单</title> <br><style type="text/css"> <br><!-- <br />body{ <br /> margin-top:0px; <br /> margin-bottom:0px; <br /> margin-left:auto; <br /> margin-right:auto; <br /> background:#fff; <br /> text-align:center; <br /> color: #333; <br /> font-family:arial,verdana,sans-serif; <br />} <br /> <br />#topbanner{ <br /> margin-left:auto; <br /> margin-right:auto; <br /> width:580px; <br /> height:40px; <br /> border-bottom:5px solid #ff9900; <br />} <br /> <br />#bottom{ <br /> margin-left:auto; <br /> margin-right:auto; <br /> width:580px; <br /> height:40px; <br /> border-top:5px solid #ff9900; <br />} <br /> <br />/*菜单样式定义*/ <br />#menu{ <br /> clear:both; <br /> margin-right: auto; <br /> margin-left: auto; <br /> width:580px; <br /> height:24px; <br /> color:#fff; <br /> background-color:#900; <br />} <br /> <br />/*主菜单样式定义*/ <br />.mainmenu{ <br /> float:left; <br /> width:64px; <br /> font-size:13px; <br /> color:#fff; <br /> border-left:1px solid #999; <br />} <br /> <br />.menucontent{ <br /> float:left; <br /> width:80px; <br /> height:20px; <br /> color:#fff; <br /> padding-top:4px; <br />} <br /> <br />.menucontent a:link { <br /> color: #fff; <br /> display:block; <br /> text-decoration: none; <br />} <br /> <br />.menucontent a:visited { <br /> color: #fff; <br /> display:block; <br /> text-decoration: none; <br />} <br /> <br />.menucontent a:hover { <br /> color: #fff; <br /> text-decoration: none; <br /> background-color:#000; <br />} <br /> <br />/*子菜单样式定义*/ <br />.submenu{ <br /> clear:both; <br /> float:left; <br /> position:absolute; <br /> width:80px; <br /> padding:0px; <br /> font-size:13px; <br />} <br /> <br />.submenu ul { <br /> background-color:#eee; <br /> list-style-type:none; <br /> width:82px; <br /> line-height:24px; <br />} <br /> <br />.submenu li { <br /> border-bottom: #ccc 1px dotted; <br />} <br /> <br />.submenu li a:link,a:visited { <br /> color: #333; <br /> display: block; <br /> text-decoration: none; <br />} <br /> <br />.submenu li a:hover { <br /> color: #fff; <br /> text-decoration: none; <br /> background-color:#900; <br /> border-top:1px solid #fff; <br />} <br />--> <br></style> <br></head> <br> <br><body> <br> <div id="topbanner"></div> <br> <div id="menu"> <br> <br> <div class="mainmenu" onmouseover="submenu1.style.display='block'" onmouseout="submenu1.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">天涯首页</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu2.style.display='block'" onmouseout="submenu2.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">天涯日志</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu3.style.display='block'" onmouseout="submenu3.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">电子通信</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu4.style.display='block'" onmouseout="submenu4.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">网络技术</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu5.style.display='block'" onmouseout="submenu5.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">爱在天涯</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu6.style.display='block'" onmouseout="submenu6.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">休闲娱乐</a></div></div> <br> <br> <div class="mainmenu" onmouseover="submenu7.style.display='block'" onmouseout="submenu7.style.display='none'"> <br> <div class="menucontent"><a href="#" title="#">电脑资讯</a></div></div> <br> <br> </div> <br> <br> <br> <div class="submenu" style="display:none;margin-left:-40px;" onmouseover="submenu1.style.display='block'" onmouseout="submenu1.style.display='none'" id="submenu1"> <br> <ul> <br> <li><a href="#" title="天涯首页">天涯首页</a></li> <br> <li><a href="#" title="天涯首页">天涯首页</a></li> <br> <li><a href="#" title="天涯首页">天涯首页</a></li> <br> <li><a href="#" title="天涯首页">天涯首页</a></li> <br> </ul> <br> </div> <br> <br> <br> <div class="submenu" style="display:none;margin-left:41px;" onmouseover="submenu2.style.display='block'" onmouseout="submenu2.style.display='none'" id="submenu2"> <br> <ul> <br> <li><a href="#" title="天涯日志">天涯日志</a></li> <br> <li><a href="#" title="天涯日志">天涯日志</a></li> <br> <li><a href="#" title="天涯日志">天涯日志</a></li> <br> <li><a href="#" title="天涯日志">天涯日志</a></li> <br> </ul> <br> </div> <br> <br> <br> <br> <div class="submenu" style="display:none;margin-left:122px;" onmouseover="submenu3.style.display='block'" onmouseout="submenu3.style.display='none'" id="submenu3"> <br> <ul> <br> <li><a href="#" title="电子通信">电子通信</a></li> <br> <li><a href="#" title="电子通信">电子通信</a></li> <br> <li><a href="#" title="电子通信">电子通信</a></li> <br> <li><a href="#" title="电子通信">电子通信</a></li> <br> </ul> <br> </div> <br> <br> <br> <div class="submenu" style="display:none;margin-left:203px;" onmouseover="submenu4.style.display='block'" onmouseout="submenu4.style.display='none'" id="submenu4"> <br> <ul> <br> <li><a href="#" title="网络技术">网络技术</a></li> <br> <li><a href="#" title="网络技术">网络技术</a></li> <br> <li><a href="#" title="网络技术">网络技术</a></li> <br> <li><a href="#" title="网络技术">网络技术</a></li> <br> </ul> <br> </div> <br> <br> <br> <div class="submenu" style="display:none;margin-left:284px;" onmouseover="submenu5.style.display='block'" onmouseout="submenu5.style.display='none '' id="submenu5"> <br> <li><a href="#" title="世界の終わりの愛">世界の終わり</a></li> ; <br> 世界の果ての恋</a></li> <br> <li><a href="#" title="世界の果ての恋World "＆gt; Love of the World＆lt;/a＆gt;＆lt; ;/a></li> <br> <a href="#" title="カタツムリ オンライン">カタツムリ オンライン</a></li> <br> <li><a href="#" title="カタツムリ オンライン">カタツムリ オンライン</a></li> 「submenu7.style.display='block'」 onmouseout="submenu7.style.display='none'" > ; <br> 「カタツムリオンライン」</a></li> <li><a href="#" title="カタツムリ オンライン">カタツムリ オンライン</a></ li > 「カタツムリ オンライン」 & lt;/a & gt; / li & gt; <br> & lt;/div & gt; div id = "下" & gt; /div & gt; <br> <br>;</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
