Project One: HTML and CSS simple menu

Today in class I learn't about how you can manipulate your CSS code to have more targeted effects. We focused on changing the appearance of our menu bar (styling a <ul>/unordered list).
Listamatic is a great place where you can get working examples to copy and then modify yourself. A couple of links from the site are:
http://css.maxdesign.com.au/listamatic/ (list based menus)

http://css.maxdesign.com.au/listamatic2/ (nested lists)

http://css.maxdesign.com.au/listamatic/horizontal03.htm (a great simple menu bar to start with)

Sometimes you can have menus that can't be entirely built with code. For example you might have an image in your menu. Using a sprite-based menu is the best option. Sprites are image files that contain many different icons or states of buttons. The code is used to move the images around to display the relevant section of the image in the right place. The following link shows this in more detail with an example. http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites.

A sprite-based menu is something I should be using for my Evoke website as I have used an image for the search Icon in the menu bar. I haven't used it though. 

The first thing I experimented with was changing the "display" so that it is either vertical or horizontal.  To do this you use the following code: 

#menu ul li {

display: inline; /*horizontal display*/

}

#menu ul li {

display: block; /*vertical display*/

}

My website design uses a horizontal display for the menu bar but I also tested out the vertical display which worked too and is shown below. 

I experimented with one of the listamatic codes. One that puts lines above and below and removes the text decoration from the links (underline).  The bits of code with a pink box around them are the commands that are removing the line from the links and adding a top and bottom line to the menu.  

Here is an example of what it should look like:

Mine has worked the only difference is that I have a horizontal menu rather than a vertical one.  

Here is the code that I have used to do this. In the below image you can also see I have used the code "display:inline" to make sure my menu is horizontal .

I also tried out the pseudo hover code on my menu bar which I managed to get working. I gave mine a blue background and white text for its "hover".  

My original design doesn't have a background, just blue text so I altered the code to get this effect for the hover. 

I also tried using the "#current" tag that we were given to try. It is suppose to indicate when the link is in use/active. I couldn't get this to work. The code for it was:

#menu ul li #current 

{

   color:#cc0000;

}

I found that using the code "#menu ul li a:active" worked instead. 

When you click on the menu button it changes the text colour to purple to show that it is active. The code that I used to create this and the rest of the menu was: