javascript nav导航栏

最新推荐文章于 2023-07-04 11:04:04 发布

gonewit

最新推荐文章于 2023-07-04 11:04:04 发布

阅读量938

点赞数

文章标签： html javascript nav 导航栏

本文链接：https://blog.csdn.net/gonewit/article/details/39324469

版权

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <head>
    <title>javascript导航</title>
    <style type="text/css">
    * { 
padding:0; 
margin:0; 
} 
body { 
font-family:verdana, sans-serif; 
font-size:small;
} 
#nav, #nav li ul { 
list-style-type:none; 
} 
#nav { 
margin:20px; 
} 
#nav li { 
float:left; 
text-align:center; 
position:relative; 
} 
#nav li a:link, #nav li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c5dbf2; 
padding-left:10px; 
} 
#nav li a:hover { 
color:#fff; 
background:#2687eb; 
} 
#nav li ul li a:hover { 
color:#fff; 
background:#6b839c; 
} 
#nav li ul { 
display:none; 
position:absolute; 
top:40px; 
left:0; 
margin-top:1px; 
width:120px; 
} 
#nav li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 
} 
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>




<body>
		<ul id="nav">
			<li><a href="#"> 首页</a></li>
			<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#"> 项目需求合作</a>
			<ul>
				<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#">网站项目</a>
				<ul>
					<li><a href="#"> 网站项目</a></li>
					<li><a href="#"> 整站项目</a></li>
					<li><a href="#"> 网站分析策划</a></li>
					<li><a href="#"> 网页设计制作</a></li>
					<li><a href="#"> 网站制作与开发</a></li>
					<li><a href="#"> 网站flash动画</a></li>
					<li><a href="#"> 网站服务器</a></li>
				</ul></li>
				<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#">多媒体设计制作</a>
				<ul>
					<li><a href="#"> 网站项目</a></li>
			         <li><a href="#"> 平面设计</a></li>
					 <li><a href="#"> 站长特效网</a></li>
					 <li><a href="#"> 3D建模与动画</a></li>
					 <li><a href="#"> Flash游戏动画</a></li>
					 <li><a href="#"> 音效及音乐</a></li>
					 <li><a href="#"> zzjs .net</a></li>
				</ul></li>
				<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#">软件设计</a>
				<ul>
					<li><a href="#"> 应用软件</a></li>
					  <li><a href="#"> 游戏开发</a></li>
					  <li><a href="#"> 驱动程序</a></li>
					  <li><a href="#"> 嵌入式开发</a></li>
					  <li><a href="#"> 手机开发</a></li>
					  <li><a href="#"> 单片机</a></li>
					  <li><a href="#"> 数据库设计</a></li>
					  <li><a href="#"> 代码移植</a></li>
				</ul></li>
				<li><a href="#"> 网络硬件</a></li>
			</ul></li>
			<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#">信息与知识</a>
			<ul>
				<li><a href="#"> 实用信息与工具</a></li>
					<li><a href="#"> 新闻动态</a></li>
					<li><a href="#"> 知识与技能</a></li>
					<li><a href="#"> 设计制作与欣赏</a></li>
					<li><a href="#"> 项目交易经验谈</a></li>
					<li><a href="#"> 下载</a></li>
			</ul></li>
			<li><a href="#"> 优秀知识欣赏</a></li>
			<li><a href="#"> 招聘</a></li>
			<li><a href="#"> 关于本站</a></li>
		</ul>


</body>

</html>