Se me desplaza la pantalla y se enfoca CSS

[gustavog88]

Hola Gente!! acudo a uds por que tengo una duda!! resulta que tengo en una seccion de mi pagina incrustado un menu accordion con puro CSS, el funciona bien todo perfecto sin ningun problema en realidad , lo unico q no me gusta es que al memento de darle click a una de las pestañas del acordeon, me desplaza la pantalla y me enfoca el mismo.. o sea me mueve la pantalla hasta donde esta el acordeon.. alguien sabe por que?? quiero q me abra el acordeon pero no q me desplaze la pantalla a su manera!!

HTML


<ul class="tutorialMenu">
<li id="coffeecards">
<h2><a href=
"#coffeecards">Economicos</a></h2>

<p><span>CSS3 Eigenschaften: Transform
&amp; Transition Modules, ...</span></p>
</li>

<li id="blogcomments">
<h2><a href=
"#blogcomments">Compactos</a></h2>

<p><span>CSS3 Eigenschaften: Border-Radius,
Box-Shadow &amp; Animation Module,
...</span></p>
</li>

<li id="onlineform">
<h2><a href=
"#onlineform">Medianos</a></h2>

<p><span>CSS3 Eigenschaften: MediaQueries,
Transform &amp; Transition Modules,
...</span></p>
</li>

<li id="rusticos">
<h2><a href=
"#rusticos">Rusticos</a></h2>

<p><span>CSS3 Eigenschaften: Transform
&amp; Transition Modules, ...</span></p>
</li>

<li id="familiar">
<h2><a href=
"#familiar">Familiar</a></h2>

<p><span>CSS3 Eigenschaften: Transform
&amp; Transition Modules, ...</span></p>
</li>


</ul>


CSS


.tutorialMenu {
padding: 0px 0;
margin: 0;
list-style-type: none;
}
.tutorialMenu h2 {
margin: 5px 0;
padding: 0;
}
.tutorialMenu h2 a {
font-size: 18px;
display: block;
font-weight: normal;
color: #FFF;
text-decoration: none;
margin: 0;
padding: 10px;
background: rgb(144,144,144);
background: rgba(255,255,255,.3);
position: relative;
}
.tutorialMenu :not(:target) h2 a {
background: rgb(59,59,59);
background: rgba(0,0,0,.4);
position: relative;
}
.tutorialMenu h2 a:hover,
.tutorialMenu h2 a:active,
.tutorialMenu h2 a:focus {
background-color: rgb(59,59,59);
background-color: rgba(255,255,255,.3);
}
.tutorialMenu :target p,
.tutorialMenu :not(:target) p {
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
-moz-transition: height .5s ease;
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
.tutorialMenu :target p { height: 295px }
.tutorialMenu #coffeecards p,
.tutorialMenu #rusticos p,
.tutorialMenu #familiar p,
.tutorialMenu #blogcomments p,
.tutorialMenu #onlineform p {
position: relative;
background: url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-transform-transition-coffee-cards.jpg) top left no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tutorialMenu #blogcomments p {
background-image: url(../images/test-ac.jpg);


}
.tutorialMenu #onlineform p { background-image: url(../images/corolla.jpg);
.tutorialMenu p { height: 295px }
.tutorialMenu p span {
font-size: 14px;
display: block;
height: 35px;
padding: 15px 0 0 0;
text-indent: 10px;
position: absolute;
bottom: 0;
left: 0;
width: auto;
color: #FFF;
background: rgb(144,144,144);
background: rgba(0,0,0,.6);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
h1,
.tutorialMenu h2 a,
.tutorialMenu :not(:target) p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}