日期:2014-05-16  浏览次数:20807 次

一个CSS HTML 的手风琴分页的问题
怎么样才能让这个手风琴效果有一个默认的打开页吗?
我想默认打开Popular Post


#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>