First lets style the overall menu .  


.menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
background-color: #8AD9FF;
border-radius: 8px;

This gives a horizontal border and background and sets some text properties. It also gives a background color and a border radius for rounded corners. 

Next we style the list itself:



.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;

 This removes the default padding and margin, creates a 8px  padding above the list. and hides the bullet points

Next we style the list items.



.menu li {
display: inline;
padding: 20px;


 This makes the list items appear inline, horizontally accross the screen. It also gives a 20px padding around each of the menu items.

The following selector targets all elements inside the menu class. Remember the 'a' element is the link or href for our menu item. This overrides the default styling of web links applied by the browser, removing the underline and changing the color.



.menu a {

text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;


Finally we are going to add a hover effect. The 'a:hover' is called a psuedo class. It is activated when the mouse rolls over a link.


 .menu a:hover {

    color: #F90;
    background-color: #FFF;