<!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>
<title>简洁实用的二级下拉导航菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
body,html{padding:0margin:0text-align:centerfont:normal 14px 'arial'}
#mainNavBar{width:100%background:#999padding:10px 0}
#nav{width:760pxheight:30pxmargin:0 auto}
#nav ul{padding:0margin:0}
#nav ul li{position:relativefloat:leftwidth:60pxheight:30pxline-height:30pxoverflow:hiddenlist-style-type:none}
#nav ul li a{display:blockcolor:#ffftext-decoration:none}
#nav ul li a:hover{font-weight:boldbackground:#666}
#subNav{position:absolutewidth:150pxtop:30pxleft:0pxpadding:5pxbackground:#666color:#ffftext-align:left}
#subNav a{text-decoration:nonefont-weight:normaldisplay:block}
#subNav a:hover{color:#f00background:#f00}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="mainNavBar">
<div id="nav">
<ul>
<li>
<a href="#">Add</a>
<div id="subNav">
<a href="#">写日志</a>
<a href="#">增加分类</a>
</div>
</li>
<li>
<a href="#">Edit</a>
<div id="subNav">
<a href="#">修改分类</a>
<a href="#">文章编辑</a>
</div>
</li>
<li>
<a href="#">Admin</a>
<div id="subNav">
<a href="#">文章管理</a>
<a href="#">评论管理</a>
<a href="#">留言管理</a>
<a href="#">退出</a>
</div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li")
for(i=0i<nav.lengthi++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold"
this.style.overflow="visible"
this.style.background="#666666"
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal"
this.style.background="#999999"
this.style.overflow="hidden"
}
}
</script>
</body>
</html>
#header #shousuo{
width:950px
height:50px
background:#f4f4f4
margin-top:10px
}
#shousuo ul li{
line-height:50px
list-style-type:none
float:left
margin-left:5px
font-weight:bold
font-size:14px
<br><SPAN><IMG id="Image_Closed" style="DISPLAY: none" onclick="this.style.display='none'Text_Closed.style.display='inline'
Image_Open.style.display='inline'
Text_Open.style.display='inline'"
src="pic/m_o.gif"><IMG id="Image_Open<%= i %>" onclick="this.style.display='none'
Image_Closed.style.display='inline'
Text_Open.style.display='none'
Text_Closed.style.display='inline'"
src="pic/m_c.gif"></SPAN>
<SPAN id="Text_Closed">大目录
<SPAN id="Text_Open" style="DISPLAY: none">'主要是这句话进行修改下
<SPAN>
<br> <IMG src="pic/m_c.gif" />小目录<br>
</SPAN>
</SPAN>
</SPAN>
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td scope="row"><table border="1">
<tr>
<td id="showbfq" height="20" align="top" onclick="if(bfq.style.display=='none'){bfq.style.display=''showbfq.innerText='优质'}
else{bfq.style.display='none'showbfq.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq" id="bfq" style="display:none">aaa</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq1" height="20" align="top" onclick="if(bfq1.style.display=='none'){bfq1.style.display=''showbfq1.innerText='优质'}
else{bfq1.style.display='none'showbfq1.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq1" id="bfq1" style="display:none">bbb</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq2" height="20" align="top" onclick="if(bfq2.style.display=='none'){bfq2.style.display=''showbfq2.innerText='优质'}
else{bfq2.style.display='none'showbfq2.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq2" id="bfq2" style="display:none">ccc</td>
</tr>
</table></td></tr>
</table>
一样的，用一个大表格，把它们竖向的框起来。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）