導航欄

用JavaScript和jQuery寫了一個導航欄，後面會慢慢加上新的樣式。

樣式：

HTML：

<div id="topnav"> 
	<ul class="logo"><li><a href="javascript:void(0)">logo</a></li></ul>
	<ul class="cnav"> <li><a href="javascript:void(0)">首頁</a></li> 
      <li id="navfind"><a href="javascript:void(0)">發現</a> <div class="navbox"><ul><li>平面</li><li> UI </li><li>網頁 </li><li>插畫</li></ul>  <ul><li>平面</li><li> UI </li><li>網頁 </li><li>插畫</li></ul></div> </li> 
      <li><a href="javascript:void(0)">同城</a></li> <li><a href="javascript:void(0)">課程</a></li> <li><a href="javascript:void(0)">活動</a></li> <li class="omit"><a href="javascript:void(0)">···</a></li>  <li><a href="javascript:void(0)">查找</a></li> </ul>
    <ul class="rnav"><li class="login"><span><a href="javascript:void(0)">登錄</a></span> | <span><a href="javascript:void(0)">註冊</a></span></li></ul> 
</div>

JavaScript：

/*javascript*/
	//鼠標移入
	document.getElementById("navfind").addEventListener("mouseover",function(){
		document.getElementById("navfind").getElementsByClassName("navbox")[0].style.display="block";
	});
	//鼠標移出
	document.getElementById("navfind").addEventListener("mouseout",function(){
		document.getElementById("navfind").getElementsByClassName("navbox")[0].style.display="none";
	});

jQuery：

/*jquery*/
	$(document).ready(function() {
		//鼠標移入
        $("#navfind").mouseover(function(){
			$("#navfind div").css("display","block");
		});
		//鼠標移出
		 $("#navfind").mouseout(function(){
			$("#navfind div").css("display","none");
		});
    });