谁能做出这样的菜单,用div和css样式来实现。谢谢啦,很有挑战性的。本人已经实现部分代码
--------------------编程问答-------------------- <!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=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style>
.menu {font-family: arial, sans-serif; width:100%; height:31px; position:relative; font-size:11px;);}
.menu ul {padding:0; margin:0; list-style-type: none; width:100%}
.menu ul li {
/*float the main list items*/
float:left; border-left:2px solid #eee; width:120px;
}
#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
display: none;
}
#nav li a {
/*for all links in the list*/
float:left; width:100%; text-decoration:none; padding:0 0 0 18px; height:30px; line-height:30px; color:#000;background-image:url(images/menubg.jpg);
}
/* 第二排的ul的默认样式*/
#nav li.off ul, #nav li.on ul {
/*put the subnavs below and hide them all*/
display: none;
position:absolute; width:100%; top:30px; left:0;;
}
/* 第二排的ul里的li的默认样式*/
.menu ul li ul li{
/*float the main list items*/
float:left; width:120px;
}
/*默认打开的第一排的li的样式,就是默认子菜单的样式"主页"*/
#nav li.on a {
/*change border color for active topic area*/
float:left; width:100%; text-decoration:none;height:30px;padding:0 0 0 18px;line-height:30px; color:#f90;
}
/*第二排的ul里的a标签的样式*/
#nav li.on ul a, #nav li.off ul a {
/* cancel inherit of border
on subnav of active topic */
border: 0;
}
#nav li.on ul {
/*display active subnav list*/
display: block;
}
/* 第二排里的ul里的a*/
#nav li.on ul a, #nav li.off ul a {
float:left; width:100%; text-decoration:none;height:30px;padding:0 0 0 18px;line-height:30px;color: #f90;background-image:url(images/menu_005.gif);
}
#nav li.on ul {
/*display the current topic*/
display: block;
}
#nav li.off:hover ul {
/* display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.off:hover a {
background: #29497b;
color: #f90;
background-image:url(images/menu_005.gif);
}
#nav li.off ul, #nav li.on ul {
/*put the subnav below*/
top: 0px;
*top: 30px; /*reposition for IE*/
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
background: #29497b;
color: #f90;
background-image:url(images/menu_005.gif);
}
</style>
</head>
<body>
<div class="menu">
<ul id="nav">
<li class="on"><a href="#">主页</a>
<ul>
<li><a href="#">主页</a></li>
</ul>
</li>
<li class="off"><a href="#">企业基本信息</a>
<ul>
<li><a href="#">企业基本信息</a></li>
</ul>
</li>
<li class="off"><a href="#">企业上报信息</a>
<ul>
<li><a href="#">企业自查信息</a></li>
<li><a href="#">风险分析情况</a></li>
<li><a href="#">主体责任评级</a></li>
</ul>
</li>
<li class="off"><a href="#">上级文件与要求</a>
<ul>
<li><a href="#">上级文件与要求</a></li>
</ul>
</li>
<li class="off"><a href="#">联系我们</a>
<ul>
<li><a href="#">电子邮件</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> --------------------编程问答--------------------
补充:.NET技术 , C#