Płynne przesuwanie pozycji menu po najechaniu kursorem

Witam,
potrzebuję pomocy przy drobnej modyfikacji menu. Mam taki oto kod - https://jsfiddle.net/tzj4zt44/2/. Chciałbym, aby po najechaniu na "LINK2" "LINK1" oraz "LINK10" odsuwał się na boki w sposób płynny (animacja), a nie jak teraz - "odskakują". Drugą rzecza, która chciałbym osiągnąć to zmiana koloru czcionki "LINK3" przy rozwinięciu bocznego menu - teraz czcionka biała jest tylko przy hoverze, jak rozwiniemy menu boczne to zmienia się z powrotem na czarną.

Dziękuję za pomoc i pozdrawiam :)

TL;DR
żeby menu się płynnie rozsuwało musisz użyć transition-duration (https://jsfiddle.net/n3sdr5ns/).
żeby menu zostawało białe

.first_lvl:hover>a, .second_lvl:hover>a { color: #ffffff !important; }

zamiast:

.first_lvl_txt:hover { color: #ffffff !important; }

To jest jeden z najlepszych przykładów jak nie należy pisać kodu. Jeżeli twój selektor w css wygląda tak:

 #menu ol > li > ul > li:hover > ol { (...) }

a Ty nie przerabiasz przykładów z ksiązki "How to write unmaintainable code" to jest coś nie tak.

Jeżeli piszesz kilkupoziomowe menu to najlepiej nadać różne klasy dla znaczników ul/ol, ułatwia to edycje/czytanie kodu:

<ul class="level-1">
  <li>(1)</li>
  <li>(1)
    <ul class="level-2">
      <li>(2)</li>
      <li>(2)
        <ul class="level-3">
          <li>(3)</li>
          <li>(3)</li>
        </ul>
        </li>
      <li>(2)</li>
    </ul>
  </li>
  <li>(1)</li>
</ul>

dzięki temu możesz w prosty sposób odwołać się do znaczników z każdego poziomu:

.level-3 > li {(...)}

zamiast

ul>li>ul>li>ul>li {(...)}

Niestety, ale hover mi nie działa :/

Działa... w kodzie masz

#menu ol a {(...)opacity: 0.8;(...)}

Dlatego kiedy najedziesz na opcje z 3 poziomu menu czcionka na 2 poziomie wydaje się szarawa.
Wrzuć tam nowego important'a, tyle ich tam jest, że już nie zaszkodzi D;

.first_lvl:hover>a,
.second_lvl:hover>a {
  color: #ffffff !important;
  opacity: 1 !important;
}