这并不是用什么控件的问题，应该算是布局，不要太过依赖所谓的控件，只要实现了布局，那么剩下就是绑定数据到页面的问题。布局类似如下的结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{text-decoration:none; color:#000;}
ul{margin:0;padding:0;list-style:none;}
.nav{width:400px;height:40px;margin:100px auto;}
.nav .sin{float:left;padding:0 10px;height:100%; position:relative; border:solid 1px #ccc;line-height:40px;}
.menu{ position:absolute;top:40px;left:-1px; display:none;}
.menu li{float:left;width:100px; padding-left:20px;background:#999;color:#fff;line-height:30px; vertical-align:top;}
</style>
<script>
window.onload=function()
{
var oNav=document.getElementById('nav');
var aLink=oNav.getElementsByTagName('a');
for(var i=0;i<aLink.length;i++)
{
aLink[i].onmouseover=function()
{
this.parentNode.getElementsByTagName('ul')[0].style.display='block';
}
aLink[i].onmouseout=function()
{
this.parentNode.getElementsByTagName('ul')[0].style.display='none';
}
}
}
</script>
</head><body>
<ul class="nav" id="nav">
<li class="sin">
<a href="javascript:;">产品列表</a>
<ul class="menu">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{text-decoration:none; color:#000;}
ul{margin:0;padding:0;list-style:none;}
.nav{width:400px;height:40px;margin:100px auto;}
.nav .sin{float:left;padding:0 10px;height:100%; position:relative; border:solid 1px #ccc;line-height:40px;}
.menu{ position:absolute;top:40px;left:-1px; display:none;}
.menu li{float:left;width:100px; padding-left:20px;background:#999;color:#fff;line-height:30px; vertical-align:top;}
</style>
<script>
window.onload=function()
{
var oNav=document.getElementById('nav');
var aLink=oNav.getElementsByTagName('a');
for(var i=0;i<aLink.length;i++)
{
aLink[i].onmouseover=function()
{
this.parentNode.getElementsByTagName('ul')[0].style.display='block';
}
aLink[i].onmouseout=function()
{
this.parentNode.getElementsByTagName('ul')[0].style.display='none';
}
}
}
</script>
</head><body>
<ul class="nav" id="nav">
<li class="sin">
<a href="javascript:;">产品列表</a>
<ul class="menu">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</li>
</ul>
</body>
</html>
解决方案 »
- 水晶报表使用次数限制，如何解决，急！！
- 关于fckedit 和 ajax 的问题
- C#做出百度文库的在线pdf浏览?
- |zyciis| NHibernate 在 Left join 的时候，On 如何添加条件，谢谢
- 在asp.net中怎样弹出一个对话框而不刷新页面
- 菜鸟求教asp.net问题，关于javascript和.vb文件的联系
- 怎样实现一个文本框在失去焦点时?????
- asp.net sqlserver 异常
- 关于checkbox取值问题
- 有没有人在用ASP.NET Web Matrix ？感觉怎么样？
- 求解<%=Eval(变量)%> 完美解决方法。
- c#怎么计算Datatable里面数据的合计和总计问题
他只是用javascript实现的一个鼠标停留事件上显示一个绝对定位的div框而已