Adding a navigation bar

we need to

move the list to the left : 'padding-left'

move the rest of the text a little to the right : 'position', 'left' and 'top'

position : absolute

em : size of the current font

body { padding-left: 11em;
       font-family: Georgia, "Times New Roman", Times, serif;
       color: purple;
       background-color: #d8da3d }
ul.navbar {
       position: absolute;
       top: 2em;
       left: 1em;
       width: 9em }

The 'position: absolute' says that the ul element is positioned independently of any text that comes before or after it in the document and the 'left' and 'top' indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.
'2em' means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then '2em' is 24 points. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

Source : http://www.w3.org/Style/Examples/011/firstcss