2

檔案下載:37781897

<style type="text/css">
* { margin:0; padding:0; list-style:none; }
body { font:12px/1.5 Verdana, Arial, Helvetica, sans-serif; color:#666; }
a { text-decoration:none; color:#000; }
.nav { border-top:1px solid #ddd; border-bottom:3px solid #eee; height:45px; margin:30px; }
.nav ul { height:24px; line-height:24px; margin-top:10px; }
.nav ul li { float:left; position:relative; border-right:1px solid #ccc; }
.nav ul li span, .nav ul li dt { font-size:14px; font-weight:700; }
.nav ul li span { padding:0px 12px; }
.nav ul li dt { padding:0px 9px 0 12px; white-space:nowrap; }
.nav ul li dl { position:absolute; background:#fff; display:none; left:-1px; top:-1px; border-style:solid; border-width:1px 4px 4px 1px; border-color:#8bb2d7; }
.nav ul li dl a { color:#1b456d; }
.nav ul li dd { padding:0 1px; }
.nav ul li dd a { display:block; border-bottom:1px solid #a1bfdb; line-height:22px; padding:0 5px; }
.nav ul li dd a:hover { background:#385e82; color:#fff; }
</style>
<body>
<div class="nav" id="nav">
<ul>
<li><span>手机&raquo;</span>
<dl>
<dt><a href="#">手机&raquo;</a></dt>
<dd><a href="#">手机频道</a></dd>
<dd><a href="#">手机论坛</a></dd>
</dl>
</li>
<li><span>笔记本电脑&raquo;</span>
<dl>
<dt><a href="#">笔记本电脑&raquo;</a></dt>
<dd><a href="#">笔记本电脑频道</a></dd>
<dd><a href="#">笔记本电脑论坛</a></dd>
<dd><a href="#">笔记本电脑论坛</a></dd>
<dd><a href="#">笔记本电脑论坛</a></dd>
</dl>
</li>
<li><span>数码相机&raquo;</span>
<dl>
<dt><a href="#">数码相机&raquo;</a></dt>
<dd><a href="#">数码相机频道</a></dd>
<dd><a href="#">数码相机论坛</a></dd>
<dd><a href="#">数码相机频道</a></dd>
<dd><a href="#">数码相机论坛</a></dd>
<dd><a href="#">数码相机频道</a></dd>
<dd><a href="#">数码相机论坛</a></dd>
<dd><a href="#">数码相机频道</a></dd>
<dd><a href="#">数码相机论坛</a></dd>
</dl>
</li>
<li><span>MP3/MP4/GPS&raquo;</span>
<dl>
<dt><a href="#">MP3/MP4/GPS&raquo;</a></dt>
<dd><a href="#">MP3/MP4/GPS频道</a></dd>
<dd><a href="#">MP3/MP4/GPS论坛</a></dd>
</dl>
</li>
<li><span>DIY硬件&raquo;</span>
<dl>
<dt><a href="#">DIY硬件&raquo;</a></dt>
<dd><a href="#">DIY硬件</a></dd>
<dd><a href="#">DIY硬件</a></dd>
</dl>
</li>
</ul>
<script type="text/javascript">
var tags=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<tags.length;i++){
tags[i].value=i;
tags[i].onmouseover=function(){
tags[this.value].getElementsByTagName("dl")[0].style.display="block";
}
tags[i].onmouseout=function(){
tags[this.value].getElementsByTagName("dl")[0].style.display="none";
}
}
</script>
</div>
</body>

 

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()