CSS- Two layer Navigation bar

Two-layer navigation bar is neat and commonly seen. Today while I was going through some jQuery examples, I found it can be implemented purely through editing CSS style-sheet

image reference

First, edit the navigation bar to be two layer UL (unordered list) like this:

• Item1
  
  
  
  • Item1.1
  
  
  • Item1.2
  
  
  
  


• Item2
  
  
  
  • Item2.1
  
  
  • Item2.2
  
  
  
  

Then edit the CSS Style-sheet
(1) let's say the class="nav" for the first layer ul element
(2) how to remove the marker in front of list-item? and remove margin and padding from list:

.nav,.nav ul{
list-style: none;
margin: 0px;
padding: 0px;
}

(3) how to display the first layer of navigation as horizontal?

.nav li{
float: left;
position: relative;
}

(4) how to display the second layer of navigation vertically while the first layered of navigation link is hovered?
a. hide the second layer of navigation at first by setting its absolute position (relative to its first parent) as a very negative number (such as -1000px, out of window)

.nav ul{
width: 100px;
position: absolute;
top: -1000px;
left: -1px;
}

b. set the width of the second layer as 100px. If the width is too long or the font-size of list-item is small, there might be more than one list-items appear in the same row.

.nav a{
font: bold 25px Arial;
display: block;
}

c. while the list item of the first navigation layer is hovered, its descendent ul appears relative to it

.nav li:hover ul{
top:25px;
}

(5)change the background color of a link in the second navigation list when it is hovered

.nav ul a:hover {
background: #ccc;
color: #000;
}

A great example: here
You can click on "View" the source code to see its stylesheet. :)