一个CSS HTML 的手风琴分页的问题_html/css_WEB-ITnose

#accordion {		margin:0;		padding:0;			list-style:none;	    }			#accordion li {			width: 485px;		}			#accordion li a {			display: block;			width: 485px;			height: 43px;				text-indent:-999em;			outline:none;		}				/* Using CSS Sprite for menu item */		#accordion li a.popular {			background:url(images/body.jpg) no-repeat 0 0;			}		#accordion li a.popular:hover, .popularOver {			background:url(images/body.jpg) no-repeat -268px 0 !important;			}				#accordion li a.category {			background:url(images/body.jpg) no-repeat 0 -43px;			}		#accordion li a.category:hover, .categoryOver {			background:url(images/body.jpg) no-repeat -268px -43px !important;			}				#accordion li a.comment {			background:url(images/body.jpg) no-repeat 0 -86px;			}		#accordion li a.comment:hover, .commentOver {			background:url(images/body.jpg) no-repeat -268px -86px !important;			}						/* Second Level UL List*/		#accordion ul {			background: rgb(53, 3, 7) repeat-y 0 0;			width:485px;			margin:0;			padding:0;			display:none;			}				#accordion ul li {				height:30px;			}						/* styling of submenu item */		#accordion ul li a {				width: 485px;				height:25px;				margin-left:15px;				padding-top:5px;				border-bottom: 1px dotted #777;				text-indent:0;				color:#ccc;				text-decoration:none;			}			/* remove border bottom of the last item */		#accordion ul li a.last {				border-bottom: none;			}		

<div><ul id="accordion" >	<li>		<a href="#" class="item popular" rel="popular">Popular Post</a>		<ul>		三国故事		</ul>	</li>	<li>		<a href="#" class="item category" rel="category">Category</a>		<ul>			<li><a href="#">Category 1</a></li>			<li><a href="#">Category 2</a></li>			<li><a href="#" class="last">Category 3</a></li>		</ul>	</li>	<li>		<a href="#" class="item comment" rel="comment">Recent Comment</a>		<ul>			<li><a href="#">Comment 1</a></li>			<li><a href="#">Comment 2</a></li>			<li><a href="#" class="last">Comment 3</a></li>		</ul>	</li></ul></div>