导航菜单竖排

just4you

浏览: 65636 次

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

编程资讯网页游戏 ASP.net 游戏

这是昨天的导航菜单的继续，改了改样式表，HTML里的DIV布局没有动，只对导航文字有一点点的修改，就能竖排了：）
就只贴HTML吧，JS和原来一样，不贴了。

<html>
<head>
<title> 仿chinaz导航 </title>
<script type="text/javascript" src="myjs.js"></script>
<style type="text/css">
.global_nav{
	margin:0;
	border:1px solid #ccc;
	width:750px;
	height:240px;
	/*overflow:hidden;*/
}
.nav_main{
	float:left;
	width:80px;
	height:240px;
	margin:0px;
	/*overflow:hidden;*/
}
.nav_main ul{
	margin:0px;
}
.nav_main li{
	float:left;
	text-align:center;
	list-style:none;
}
.nav_current{
	border-top:1px solid black;
	border-left:1px solid black;
	border-bottom:1px solid black;
	display:block;
	font-size:14px;
	font-weight:bold;
	color:green;
	width:80px;
	height:30px;
	margin:0px 0px 0px 0px;
	padding:7px 0px 0px 0px;	
	text-decoration:none;
	background-color:#e6e6e6;
	overflow:hidden;
}
.nav_link{
	display:block; /*目前不能理解其内涵:(*/
	border-right:1px solid black;
	font-size:14px;
	width:80px;
	height:30px;
	padding:7px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	text-decoration:none;
}
.nav_sub{
	float:left;
	width:80px;
	height:260px;
	text-align:left;
	font-size:12px;
}
.sub_box{
	float:left;
	width:80px;
	height:240px;
	margin:0px;
	border-top:1px solid black;
	border-right:1px solid black;
	border-bottom:1px solid black;
	background-color:#E6E6E6;
}
.nav_sub li{
	float:left;
	height:20px;
	width:74px;
	margin:3px 0px 3px 0px;
	padding:0px 5px 0px 5px;
	text-align:center;
	list-style:none;
}
.nav_sub ul{
	margin:5px 0px 0px 0px;
}
.dis{
	display:block;
}
.undis{
	display:none;
}
.nav_current a:link,.nav_current a:visited{
	color:green;
	text-decoration:none;
}
.nav_current a:hover{
	color:red;
	text-decoration:none;
}
.nav_link a:link,.nav_link a:visited,.nav_link a:hover{
	color:blue;
	text-decoration:none;
}
.nav_sub li a:link,.nav_sub li a:visited,{
	color:blue;
	text-decoration:none;
}
.nav_sub li a:hover{
	color:blue;
	text-decoration:none;
	/*background-color:red;*/
}
</style>
</head>

<body>
<a href="#">link</a>
<div class="global_nav">
	<div class="nav_main">
		<ul>
			<li><span id="nav1" class="nav_current" onmouseover="doClick(this);"><a href="#">首 页</a></span></li>
			<li><span id="nav2" class="nav_link" onmouseover="doClick(this);"><a href="#">站长在线</a></span></li>
			<li><span id="nav3" class="nav_link" onmouseover="doClick(this);"><a href="#">网站运营</a></span></li>
			<li><span id="nav4" class="nav_link" onmouseover="doClick(this);"><a href="#">联盟资讯</a></span></li>
			<li><span id="nav5" class="nav_link" onmouseover="doClick(this);"><a href="#">新闻资讯</a></span></li>
			<li><span id="nav6" class="nav_link" onmouseover="doClick(this);"><a href="#">设计在线</a></span></li>
			<li><span id="nav7" class="nav_link" onmouseover="doClick(this);"><a href="#">网络编程</a></span></li>
			<li><span id="nav8" class="nav_link" onmouseover="doClick(this);"><a href="#">服 务 器</a></span></li>
		</ul>
	</div>
	<div class="nav_sub">
		<div class="sub_box dis" id="sub1">
			<ul>
				 <li><strong>热点通告</strong></li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub2">
			<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>
			</ul>
		</div>
		<div class="sub_box undis" id="sub3">
			<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>
			</ul>
		</div>
		<div class="sub_box undis" id="sub4">
			<ul>
				<li><a href="#">联盟新闻</a></li>
				<li><a href="#">联盟介绍</a></li>
				<li><a href="#">联盟点评</a></li>
				<li><a href="#">网赚技巧</a></li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub5">
			<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>
		</div>
		<div class="sub_box undis" id="sub6">
			<ul>
				<li><a href="#">酷站推荐</a> </li>
				<li><a href="#">网页设计</a></li>
				<li><a href="#">WEB标准</a></li>
				<li><a href="#">视频处理</a></li>
				<li><a href="#">设计活动</a></li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub7">
			<ul>
				<li><a href="#">Asp编程</a></li>
				<li><a href="#">Php编程</a></li>
				<li><a href="#">.Net编程</a></li>
				<li><a href="#">Xml编程</a></li>
				<li><a href="#">Access</a></li>
				<li><a href="#">Mssql</a></li>
				<li><a href="#">Mysql</a></li>
			</ul>
		</div>
		<div class="sub_box undis" id="sub8">
			<ul>
				<li><a href="#">Web服务器</a></li>
				<li><a href="#">Ftp服务器</a></li>
				<li><a href="#">Mail服务器</a></li>
				<li><a href="#">Dns服务器</a></li>
				<li><a href="#">Win服务器</a></li>
				<li><a href="#">Linux服务器</a></li>
				<li><a href="#">安全防护</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

分享到：