正在学CSS,自写了段代码,想实现坚排二级菜单的伸缩,结果发现只能收缩隐藏,不能打开,请高手指点。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>
<link href="css/lists.css" rel="stylesheet" type="text/css"/><script type="text/javascript">
<!--
function clickshow(t)
{
if (document.getElementById(t).style.display='none')
{
getElementById(t).style.display=='bolck';
}
else
{
getElementById(t).style.display=='none';
}
}
-->
</script>
</head> <body>
<div id="container">
<dl>
<dt onclick="clickshow('menu1')"><a href="#">Menu 1 <a> </dt>
<dd>
<ul>
<li><a href="#">Drink Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spiirts</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</dd> <dt onclick="clickshow('menu2')"><a href="#">Menu 2 <a></dt>
<dd>
<ul id="menu2">
<li><a href="#">Drink Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spiirts</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
CSS代码 body {
margin: 10px;
background-color:#CCC;
}
/* Container for all page content */
#container {
border:1px solid #000;
background-color:#FFF;
}dl{
width:160px;
margin:0;
padding:2px;
border:1px solid #000;
font: bold 12px 'Lucida Grande',Verdana,sans-serif;
}dl a:link, dl a:visited, dl a:hover, dl a:active {
display:block;
padding: 2px 10px;
text-decoration:none;
}dl a:hover{
color:#FFF;
background:#000;
}dt{
background-color:#DDDDDD;
padding:2px;
border-style:solid;
border-width:1ps;
border-color:#FFF #AAA #666 #FFF;
width:auto;
}dd{
margin:0;
}ul {
margin:5px 0 5px 0;
padding:0;
list-style-type:none;
}ul a:link, ul a:visited, ul a:hover, ul a:active {
display:block;
padding: 2px 10px;
text-decoration:none;
}ul a:hover{
color:#FFF;
background:#000;
}li{
background:#ddd;
margin:0;
padding:2px;
border-style:solid;
border-width:1px;
border-color:#FFF #AAA #666 #FFF;
)
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/lists.css" rel="stylesheet" type="text/css"/><script type="text/javascript">
<!--
function clickshow(t)
{
if (document.getElementById(t).style.display='none')
{
getElementById(t).style.display=='bolck';
}
else
{
getElementById(t).style.display=='none';
}
}
-->
</script>
</head> <body>
<div id="container">
<dl>
<dt onclick="clickshow('menu1')"><a href="#">Menu 1 <a> </dt>
<dd>
<ul>
<li><a href="#">Drink Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spiirts</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</dd> <dt onclick="clickshow('menu2')"><a href="#">Menu 2 <a></dt>
<dd>
<ul id="menu2">
<li><a href="#">Drink Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spiirts</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
CSS代码 body {
margin: 10px;
background-color:#CCC;
}
/* Container for all page content */
#container {
border:1px solid #000;
background-color:#FFF;
}dl{
width:160px;
margin:0;
padding:2px;
border:1px solid #000;
font: bold 12px 'Lucida Grande',Verdana,sans-serif;
}dl a:link, dl a:visited, dl a:hover, dl a:active {
display:block;
padding: 2px 10px;
text-decoration:none;
}dl a:hover{
color:#FFF;
background:#000;
}dt{
background-color:#DDDDDD;
padding:2px;
border-style:solid;
border-width:1ps;
border-color:#FFF #AAA #666 #FFF;
width:auto;
}dd{
margin:0;
}ul {
margin:5px 0 5px 0;
padding:0;
list-style-type:none;
}ul a:link, ul a:visited, ul a:hover, ul a:active {
display:block;
padding: 2px 10px;
text-decoration:none;
}ul a:hover{
color:#FFF;
background:#000;
}li{
background:#ddd;
margin:0;
padding:2px;
border-style:solid;
border-width:1px;
border-color:#FFF #AAA #666 #FFF;
)
{
if (document.getElementById(t).style.display=='none')
{
getElementById(t).style.display='bolck';
}
else
{
getElementById(t).style.display='none';
}
}