[解決済み] HTML要素のスタイルを変更するjQuery

質問

私はHTML上のリストを持っています

<div id="header" class="row">
    <div id="logo" class="col_12">And the winner is<span>n't...</span></div> 
    <div id="navigation" class="row"> 
        <ul id="pirra">
            <li><a href="#">Why?</a></li>
            <li><a href="#">Synopsis</a></li>
            <li><a href="#">Stills/Photos</a></li>
            <li><a href="#">Videos/clips</a></li>
            <li><a href="#">Quotes</a></li>
            <li><a href="#">Quiz</a></li>
        </ul>
    </div>  

CSSを変更すると、横向きに表示されるようになります。

div#navigation ul li { 
    display: inline-block;
}

というのがありましたが、今はjQueryでやりたいので、使っています。

$(document).ready(function() {
    console.log('hello');
    $('#navigation ul li').css('display': 'inline-block');
});

のように表示されるのですが、うまくいきません。

ありがとうございます。

どのように解決するのですか？

これを使います。

$('#navigation ul li').css('display', 'inline-block');

また、他の方もおっしゃっていますが、一度に複数のCSSを変更したい場合は、中括弧（オブジェクト記法のため）を追加すると、以下のようになります（例えば、「display」に加えて「background-color」と「position」も変更したい場合）。

$('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples.