How to set <ui> list item appears horizontally Using CSS

<ui> list items are commonly used for creating horizontal menu with css effects , I will explain it later posts . Lets comes to our problem ,it is very easy to align unordered list item(<ui>) into horizontally by set display: inline to your css file .
For example :
HTML Section
<ul id="menu">
<li> <a href=""> home</a></li>
<li>&gt; <a href="">  123arena</a></li>
<li>&gt; <a href="">  Dreamtheweb</a></li>
<li>&gt; <a href="">  google</a></li>
<li>&gt; <a href="">  facebook</a></li>
</ul>
  CSS Section
#menu li
{
display: inline;
}
    SEE DEMO