当前位置:编程学习 > C#/ASP.NET >>

谁能做出这样的菜单,用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#
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,