实现类似土豆网上顶部菜单栏的效果,200分

Question

菜单栏效果很多js都可以做，菜单的内容可以用ajax请求，给出几个选项吧，ext，dojo都可以比较容易的实现这种类似的菜单，而至于鼠标经过仅仅是事件罢了，onmouseover。。另外，鼠标悬停在某菜单项上的效果可以通过js做，也可以通过css的hover伪类来做

Answer 1

2:鼠标经过视频，弹出选项 ----这个没看到鼠标经过菜单，显示二级菜单如下：
CSS代码
body{
font-size:12px;
margin:0px;
padding:0px;
text-align:center;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
}
.list a:link, .list a:visited{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
.list a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
.list a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
margin-left:100px;
margin-top:20px;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
DIV代码
<div id="nav">
  <ul>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页  
  <div class="list">
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
  <div class="list">
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信  
  <div class="list">
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理  
  <div class="list">
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  </ul>
</div>

Answer 2

这个效果就只是显示和隐藏层不是很麻烦就只是设置层的display为none就是隐藏了要效果好看，就慢慢调试样式

Answer 3

鼠标经过显示图片 这个是鼠标经过的事件 onmouseover
鼠标离开也是事件 onmouseout
显示层内容 可以用 getElementById(divName).style.display="block";
隐藏的话 就是none; 把这内容加事件里就可以了

Answer 4

居中垂直 最简单的办法
<style type="text/css">
.lanrentuku {  
  float: left;  
  text-align: center;  
  width: 150px;  
  height: 150px;  
  margin: 5px;  
  border: 1px solid #ccc;  
  font-size: 1em;  
  line-height: 148px;  
  }  .lanrentuku img {  
  margin-top: e­xpression(( 150 - this.height ) / 2);   
  } 
</style>