Sinple menu by CSS

Firstly, I use ul and li tags to create a list of menu.



and its screenshot will be :


The next step is adding the CSS styles that will make the menu look good and provide the effect of showing/hiding the submenus. I create a separate file called menu.css

I remove a dot in the list by format "ul" tag

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}

At the moment, the sreenshot will be changed :

Then, I aslo format "li" tag:

ul li {
display: block;
position: relative;
float: left;
}

The vertical menu now transforms to a horizontal menu:



submenu is also appeared in second line.

I will hide the second line with:

li ul { display: none; }

The picture now is:


I decorate the menu by:

ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}

I now cover the each button with hover, so there is a change on each button when any user mouse their mouse on the menu.

ul li a:hover { background: #617F8A; }

Displaying submenu in the second line

li:hover ul {
display: block;
position: absolute;
}

As the submenu's appearance, it is so ugly, I am going to format the submenu in order:

li:hover li {
float: none;
font-size: 11px;
}

Hovering the submenu with colour: #617F8A

li:hover a { background: #617F8A; }

Making an effect when users move their mouse on the submenu.

li:hover li a:hover { background: #95A9B1; }

a submenu called "Lạp Xưởng" is changed a bit with its colour.

THE FULL CODE IS:

ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }