j2ee中，这个页面的效果应该怎样实现？鼠标放在"交易日志"上，下面会出现一个下拉框，如图，鼠标移走自动消失！

Question

j2ee中，这个页面的效果应该怎样实现？鼠标放在"交易日志"上，下面会出现一个下拉框，如图，鼠标移走自动消失！下面出来的下拉框，都是a标签的链接。应该怎么实现呢？
下拉框是不是作为一个div隐藏起来？

Answer 1

主要依赖html的鼠标覆盖事件和div层的控制。实际上有很多现成的js组件已经实现了这个功能。
这问题应该放到js区去

Answer 2

可以隐藏一个DIV，里面是<a>的连接，当鼠标移动到交易日记上显示，移除时隐藏就可以，另外需要CSS做些布局

Answer 3

#nav {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 67px;
  height : 10px;
  line-height: 24px; 
  list-style-type: none; 
  background:#F3F7FD;
}
#nav a {
 display: block;
 width: 80px;}
#nav a:link {
 color:#666;
 text-decoration:none;
}
#nav a:visited {
 color:#666;
 text-decoration:none;
}
#nav a:hover {
 color:#EB9538;
 text-decoration:none;
 font-weight:bold;
 
}
#nav li {
 float: left; 
 width: 100px; 
 background:#F3F7FD;
 
}
#nav li a:hover{
 border-width:1px; 
 border-color:#CCCCCC; 
 border-style:solid;
}
#nav li a.on{ 
 background:#FFFFFF;
}
#nav li ul {
 line-height: 27px; 
 list-style-type: none;
 text-align:left;
 left: -999em; 
 width: 180px; 
 position: absolute; 
 border-width:1px; 
 border-color:#CCCCCC; 
 border-style:solid;
}
#nav li ul li{
 float: left; 
 width: 180px;
 background: #FFFFFF;  
}
#nav li ul a{
 display: block; 
 width: 180px;
 w\idth: 156px;
 text-align:left;
 padding-left:24px;
}
#nav li ul a:link {
 color:#666; 
 text-decoration:none;
}
#nav li ul a:visited {
 color:#666;
 text-decoration:none;
}
#nav li ul a:hover {
 color:#5A5A5A;
 text-decoration:none;
 font-weight:normal;
 background:#EDEFF1;
}
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left; 
}
​