这是昨天的导航菜单的继续,改了改样式表,HTML里的DIV布局没有动,只对导航文字有一点点的修改,就能竖排了:)
就只贴HTML吧,JS和原来一样,不贴了。
就只贴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>