Здравствуйте. Пытаюсь реализовать слайдер аккордеон. Есть несколько вещей, которых хотелось бы добиться. Кодировка на чистом CSS.
Ссылка на форум - http://oneart21.rusff.ru/
Чего хотелось бы добиться:
По умолчанию(без наведения курсора на книги), первая книга должна быть открыта, остальные - нет.

Пример

При наведении курсора на какую-либо книгу, эта книга должна быть открыта, другие закрыты.

Пример

Сейчас по умолчанию всё выглядит так:

Проблема заключается в том, что я не знаю, как сделать первую книгу открытой по умолчанию. Пробовала разные варианты, работало, но при наведении на другие книги, первая книга не закрывалась и всё остальное вылезало за пределы необходимых 300px.

CSS

Код:

<style type="text/css">
* {
margin: 0;
padding: 0;
}
 
body {
background: none; 
}
 
.art {
width: 300px; height: 255px;
overflow: hidden;
margin: 0px auto;
}
 
/*Небольшой хак для предотвращения мелькания на некоторых браузерах*/
.art ul {
width: 400px;
}
 
.art li {
position: relative;
display: block;
width: 40px;
float: left;
/* Создание анимации с помощью переходов */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;	
transition: all 0.5s;
}
 
/* Уменьшить ширину для неактивных изображений */
.art ul li {
width: 40px;
}
 
/* Задание ширины изображения при поднесении к ней курсора */
/* Данный стиль (li:hover) переопределит ul:hover */
.art ul li:hover {
width: 140px;
}
 
.art li img {
display: block;
}

</style>

HTML

Код:

<div class="art">
  <ul>
    <!-- 1 элемент слайдера -->
    <li>
      <div class="image">
        <a href="#"></a>
<img src="http://sh.uploads.ru/MEpAr.png" />
      <a>
      </a>
      </div>
    </li>
    <!-- 2 элемент слайдера -->
    <li>
      <div class="image">
        <a href="#"></a>
      </div>
      <a>
        <img src="http://sh.uploads.ru/VtNWD.png" />
      </a>
    </li>
    <!-- 3 элемент слайдера -->
    <li>
      <div class="image">
        <a href="#"></a>
      </div>
      <a>
        <img src="http://sg.uploads.ru/aGXZK.png" />
      </a>
    </li>
    <!-- 4 элемент слайдера -->
    <li>
      <div class="image">
        <a href="#"></a>
      </div>
      <a>
        <img src="http://sg.uploads.ru/hgpvq.png" />
      </a>
    </li>
<!-- 5 элемент слайдера -->
    <li>
      <div class="image">
        <a href=""></a>
      </div>
      <a>
        <img src="http://sh.uploads.ru/jp9yJ.png" />
      </a>
    </li>
  </ul>
</div>

Надеюсь на помощь, а то уже совсем отчаялась.