CSS не работает корректно в то время как inline

Question

Я хочу сделать мой CSS встроенным, но некоторые части CSS, похоже, перестают работать. Я пробовал все CSS-услуги Inliner, которые мог найти, и результат всегда один и тот же.

Что я хочу: http://codepen.io/anon/pen/qEBbQg

Что я получаю: http://codepen.io/anon/pen/ogNbQO

Блок-CSS:

li { 
    display: inline; 
    padding: 20px; 
    font-weight: bold; 
} 

#navigation{ 
    width: 100%; 
    background: #0f83a0; 
    display: inline-block; 
    position: fixed; 
    text-align: right; 
    height: auto; 
    font-size: 20px; 
    z-index: 999; 
} 

html, body{ 
    padding: 0; 
    margin: 0; 
    font-family: 'Open Sans', sans-serif; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 

} 
li a { 
    text-decoration: none; 
    color: #FFF; 
    padding: 8px 8px 8px 8px; 
} 
#navigation ul li a{ 
    cursor:pointer; 
    background-color: #0f83a0; 
    color:white; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 

#navigation ul li a:hover{ 
    background-color: #fff; 
    color: #0f83a0; 
} 
</style> 

<div id="navigation"> 
      <img id="logo" src="logo.png" style="display:inline-block; position:absolute; left:5; top: 0; height: 100%;"/> 
      <ul> 
       <li> 
        <a href="#1">What is this?</a> 
       </li> 
       <li> 
        <a href="#2">[Title 2]</a> 
       </li> 
       <li> 
        <a href="#3">Works everywhere</a> 
       </li> 
       <li> 
        <a href="#4">Contact</a> 
       </li> 
      </ul> 
     </div> 

Встроенный CSS:

<div id="navigation" style="width:100%;background-color:#0f83a0;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;display:inline-block;position:fixed;text-align:right;height:auto;font-size:20px;z-index:999;" > 
      <img id="logo" src="logo.png" style="display:inline-block;position:absolute;left:5;top:0;height:100%;" /> 
      <ul> 
       <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" > 
        <a href="#1" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >What is this?</a> 
       </li> 
       <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" > 
        <a href="#2" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >[Title 2]</a> 
       </li> 
       <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" > 
        <a href="#3" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Works everywhere</a> 
       </li> 
       <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" > 
        <a href="#4" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Contact</a> 
       </li> 
      </ul> 
     </div> 

Наклонная анимация не работает